jQuery表单验证 案例
来源：互联网 发布：mac口红专柜多少钱一支 编辑：程序博客网 时间：2024/05/01 14:53
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link href="../css/css.css" type="text/css" rel="stylesheet"/> <script language="JavaScript" type="text/javascript" src="/common/js/jquery.js"></script> <script src="/common/js/kindeditor/kindeditor.js"></script><script src="/common/js/kindeditor//lang/zh_CN.js"></script><script type="text/javascript"> $(document).ready(function() { var formatEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; var formatMobile = /^(0?(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8})$/; var formatTel = /^0\d{2,3}-?\d{7,8}$/; var formatIdentity = /^([1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X))$/; var formatREGISTERED_CAPITAL = /^\d+$/; //基本信息填写 var fullname = $('#fullname'); var identity = $('#identity'); var tel = $('#tel'); var mobile = $('#mobile'); var email = $('#email'); //店铺名称填写 var shop_name = $('#shop_name'); //公司详细信息 var company_name = $('#company_name'); var business_license_id = $('#business_license_id'); var legal_person = $('#legal_person'); var legal_person_id = $('#legal_person_id'); var BUSINESS_LICENSE_ADDRESS = $('#BUSINESS_LICENSE_ADDRESS'); var REGISTERED_CAPITAL = $('#REGISTERED_CAPITAL'); var BUSINESS_SCOP = $('#BUSINESS_SCOP'); //基本信息 $(fullname).blur(function() { if (fullname.val() !== '') { $('#fullname-s').hide(); $('#fullname-x').hide(); } else { $('#fullname-x').show(); $('#fullname-s').show(); } }); //身份证号码 $(identity).blur(function() { if (identity.val() !== '') { $('#identity-s').hide(); if (identity.val() !== '' && !identity.val().match(formatIdentity)) { $('#identity-s').html('身份证号码格式不正确！'); $('#identity-s').show(); $('#identity-x').show(); }else{ $('#identity-x').hide(); } } else { $('#identity-s').html('身份证号码不能为空！'); $('#identity-s').show(); $('#identity-x').show(); } }); //固定电话 $(tel).blur(function() { if (tel.val() !== '') { $('#tel-s').hide(); if (tel.val() !== '' && !tel.val().match(formatTel)) { $('#tel-s').html('固定电话号码格式不正确！正确格式如：0311-87654321'); $('#tel-s').show(); $('#tel-x').show(); }else{ $('#tel-x').hide(); } } else { $('#tel-s').html('固定电话号码不能为空！'); $('#tel-s').show(); $('#tel-x').show(); } }); //手机号码 $(mobile).blur(function() { if (mobile.val() !== '') { $('#mobile-s').hide(); if (mobile.val() !== '' && !mobile.val().match(formatMobile)) { $('#mobile-s').html('手机号码格式不正确！正确格式如：13012345678'); $('#mobile-s').show(); $('#mobile-x').show(); }else{ $('#mobile-x').hide(); } } else { $('#mobile-s').html('手机号码不能为空！'); $('#mobile-s').show(); $('#mobile-x').show(); } }); //邮箱 $(email).blur(function() { if (email.val() !== '') { $('#email-s').hide(); if (email.val() !== '' && !email.val().match(formatEmail)) { $('#email-s').html('邮箱格式不正确！'); $('#email-s').show(); $('#email-x').show(); }else{ $('#email-x').hide(); } } else { $('#email-s').html('邮箱不能为空！'); $('#email-s').show(); $('#email-x').show(); } }); //基本信息填写-----------------------------------end //公司详细信息------------------------------------------------ $(company_name).blur(function() { if (company_name.val() !== '') { $('#company_name-s').hide(); $('#company_name-x').hide(); } else { $('#company_name-s').show(); $('#company_name-x').show(); } }); //营业执照注册号 $(business_license_id).blur(function() { if (business_license_id.val() !== '') { $('#business_license_id-s').hide(); $('#business_license_id-x').hide(); } else { $('#business_license_id-s').show(); $('#business_license_id-x').show(); } }); //法人姓名 $(legal_person).blur(function() { if (legal_person.val() !== '') { $('#legal_person-s').hide(); $('#legal_person-x').hide(); } else { $('#legal_person-s').show(); $('#legal_person-x').show(); } }); //法人身份证 $(legal_person_id).blur(function() { if (legal_person_id.val() !== '') { $('#legal_person_id-s').hide(); if (legal_person_id.val() !== '' && !legal_person_id.val().match(formatIdentity)) { $('#legal_person_id-s').html('身份证号码格式不正确！'); $('#legal_person_id-s').show(); $('#legal_person_id-x').show(); }else{ $('#legal_person_id-x').hide(); } } else { $('#legal_person_id-s').html('身份证号码不能为空！'); $('#legal_person_id-s').show(); $('#legal_person_id-x').show(); } }); //公司详细地址 $(BUSINESS_LICENSE_ADDRESS).blur(function() { if (BUSINESS_LICENSE_ADDRESS.val() !== '') { $('#BUSINESS_LICENSE_ADDRESS-s').hide(); $('#BUSINESS_LICENSE_ADDRESS-x').hide(); } else { $('#BUSINESS_LICENSE_ADDRESS-s').show(); $('#BUSINESS_LICENSE_ADDRESS-x').show(); } }); //注册资金 $(REGISTERED_CAPITAL).blur(function() { if (REGISTERED_CAPITAL.val() !== '') { $('#REGISTERED_CAPITAL-s').hide(); if (REGISTERED_CAPITAL.val() !== '' && !REGISTERED_CAPITAL.val().match(formatREGISTERED_CAPITAL)) { $('#REGISTERED_CAPITAL-s').html('只能输入数字！'); $('#REGISTERED_CAPITAL-s').show(); $('#REGISTERED_CAPITAL-x').show(); }else{ $('#REGISTERED_CAPITAL-x').hide(); } } else { $('#REGISTERED_CAPITAL-s').html('注册资金不能为空！'); $('#REGISTERED_CAPITAL-s').show(); $('#REGISTERED_CAPITAL-x').show(); } }); //经营范围 $(BUSINESS_SCOP).blur(function() { if (BUSINESS_SCOP.val() !== '') { $('#BUSINESS_SCOP-s').hide(); $('#BUSINESS_SCOP-x').hide(); } else { $('#BUSINESS_SCOP-s').show(); $('#BUSINESS_SCOP-x').show(); } }); //公司详细信息----------------------------------------end //店铺信息填写---------------------------------------------- $(shop_name).blur(function() { if (shop_name.val() !== '') { $('#shop_name-s').hide(); $('#shop_name-x').hide(); } else { $('#shop_name-s').show(); $('#shop_name-x').show(); } }); //店铺信息填写----------------------------------end $('#nextStepBtn').click(function() { if (fullname.val() === '' || identity.val() === '' || tel.val() === '' || mobile.val() === '' || email.val() === '' || shop_name.val() === '' || company_name.val() === '' || business_license_id.val() === '' || legal_person.val() === '' || legal_person_id.val() === '' || BUSINESS_LICENSE_ADDRESS.val() === '' || REGISTERED_CAPITAL.val() === '' || BUSINESS_SCOP.val() === '') { alert('填写信息不完整'); return false; } if (identity.val() !== '') { if (!identity.val().match(formatIdentity)) { alert('身份证格式不正确！'); return false; } } if (tel.val() !== '') { if (!tel.val().match(formatTel)) { alert('固定电话格式不正确！'); return false; } } if (mobile.val() !== '') { if (!mobile.val().match(formatMobile)) { alert('手机号码格式不正确！'); return false; } } if (email.val() !== '') { if (!email.val().match(formatEmail)) { alert('邮箱格式不正确！'); return false; } } if (legal_person_id.val() !== '') { if (!legal_person_id.val().match(formatIdentity)) { alert('企业法人身份证格式不正确！'); return false; } } if (REGISTERED_CAPITAL.val() !== '') { if (!REGISTERED_CAPITAL.val().match(formatREGISTERED_CAPITAL)) { alert('注册资金只能是纯数字！'); return false; } } }); });//需要判断某些项是否存在，demo,没有用 function MembernameExist() { jQuery.ajax({ type: "GET", url: "/shop/checkexist.aspx", dataType: "html", data: "flag=m&userName=" + escape($("#membername").val()), beforeSend: function(XMLHttpRequest) { $("#smembername").text("正在查询……"); }, success: function(msg) { $("#smembername").html(msg); var chan = $("#smembername").html(); chan = chan.substring(0, 6); if (chan == "用户名已存在") $("#membername").clearInputs(); }, complete: function(XMLHttpRequest, textStatus) { //finisi return }, error: function(XMLHttpRequest, textStatus, errorthrow) { //error treat } }); } KindEditor.ready(function(K) {var editor = K.editor({allowFileManager : true });K('#pickButton4').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({showRemote : false,imageUrl : K('#url3').val(),clickFn : function(url, title, width, height, border, align) {K('#url3').val(url);editor.hideDialog();}});});});K('#pickButton1').click(function() {editor.loadPlugin('image', function() {editor.plugin.imageDialog({showRemote : false,imageUrl : K('#url3').val(),clickFn : function(url, title, width, height, border, align) {K('#url1').val(url);editor.hideDialog();}});});});$("#shop_name").blur(function(){ var str1=$.trim($("#shop_name").val()); if(str1){ //str1=encodeURI(str1); $.post('checkshopname.php',{shopname:str1},function(data){ if(data==0){ alert("您输入的店铺名称已被注册，请重新输入！"); $("#shop_name").val(''); $("#shop_name").focus(); } }) } }) }); </script> </head> <body> <?php require_once 'Inc_headForJoin.php'; ?> <div id="nmain"> <div class="panel"> <div class="panel-heading"> <h3 class="lh-50">公司信息提交</h3> <div class="more"> <div class="progress"> <div class="progress-wrap"> <div class="progress-item passed"> <div class="number">1</div> <div class="progress-desc">入驻须知</div> </div> </div> <div class="progress-wrap"> <div class="progress-item ongoing"> <div class="number">2</div> <div class="progress-desc">信息提交</div> </div> </div> <div class="progress-wrap"> <div class="progress-item tobe"> <div class="number"><i class="tick"></i></div> <div class="progress-desc">等待审核</div> </div> </div> </div> </div> </div> <form name="stepForm" id="stepForm" method="post" enctype="multipart/form-data" action=""> <div class="panel-body"> <div class="callout mb10"> <i></i> <div class="content"> 以下所需要上传电子版资质仅支持JPG、GIF、PNG格式的图片，大小不超过2M，且必须加盖企业彩色公章。 </div> </div> <!-- 基本信息填写 --> <div class="m" > <div class="mt"> <h4 class="title">基本信息填写</h4> </div> <div class="mc"> <dl class="horizontal fl"> <dt><span class="red" id="fullname-x">*</span>申请人姓名</dt> <dd> <input type="text" class="input" name="fullname" id="fullname" value=""/> <label class="error" id="fullname-s" style="display:none" >申请人姓名不能为空！</label> </dd> <dt><span class="red" id="identity-x">*</span>身份证号</dt> <dd> <input type="text" class="input" name="identity" id="identity" value=""/> <label class="error" id="identity-s" style="display:none">身份证号格式错误！</label> </dd> <dt><span class="red" id="tel-x">*</span>固定电话</dt> <dd> <input type="text" class="input" name="phone" id="tel" value=""/> <label class="error" id="tel-s" style="display:none">请正确填写您的公司电话,如：010-87654321</label> </dd> <dt><span class="red" id="mobile-x">*</span>手机</dt> <dd class="deletePane"> <input type="text" class="input" name="mobile" id="mobile" value="" /> <label class="error" id="mobile-s" style="display:none">手机格式不正确，如：13812345678</label> </dd> <dt><span class="red" id="email-x">*</span>电子邮箱</dt> <dd class="deletePane"> <input type="text" class="input" name="email" id="email" value="" /> <label class="error" id="email-s" style="display:none">请正确填写你的电子邮箱,如：adc@123.com</label> </dd> </dl> </div> </div> <!-- 公司信息填写 --> <div class="m" > <div class="mt"> <h4 class="title">公司信息填写</h4> </div> <div class="mc"> <dl class="horizontal fl"> <dt><span class="red" id="company_name-x">*</span>公司名称</dt> <dd> <input type="text" class="input" name="company_name" id="company_name" value=""/> <label class="error" id="company_name-s" style="display:none">公司名称不能为空</label> </dd> <dt><span class="red" id="business_license_id-x">*</span>营业执照注册号</dt> <dd> <input type="text" class="input" name="corp_license_id" id="business_license_id" value=""/> <label class="error" id="business_license_id-s" style="display:none" >营业执照注册号不能为空</label> </dd> <dt><span class="red" id="legal_person-x">*</span>法定代表人姓名</dt> <dd><input type="text" class="input" name="legal_person" id="legal_person" value=""/> <label class="error" id="legal_person-s" style="display:none" >法定代表人姓名不能为空</label> </dd> <dt><span class="red" id="legal_person_id-x">*</span>身份证号</dt> <dd><input type="text" class="input" name="legal_person_id" id="legal_person_id" value=""/> <label class="error" id="legal_person_id-s" style="display:none" >身份证号不能为空</label> </dd> <dt><span class="red">*</span>法人身份证电子版</dt> <dd class="deletePane"> <div id="fileList4"> </div> <div id="container4" > <input readonly=”readonly” type="text" id="url3" value="" name='legal_person_id_pic'/><a id="pickButton4" class="btn-vice">上传</a> <span id="fileButton4" class="error"></span> </div> </dd> <dt><span class="red">*</span>公司所在地</dt> <dd> <select name="province" id="add0" class="chechthis" onchange="Setdiqu($(this), 'add1')" rel="shengshi" style=" width:95px; height:22px;"> <option value="">请选择省份</option> <? foreach($shengfen_class as $item){?> <option value="<?= $item['code'] ?>" <? if($item['code']==$add0){?>selected<? }?>> <?= $item['name'] ?> </option> <? }?> </select> 城市： <select name="city" id="add1" class="chechthis" rel="shengshi" onchange='Setdiqu($(this), 2)' style=" width:109px; height:22px;"> <option value="">请选择</option> <? foreach($shiqu_class as $item){?> <option value="<?= $item['code'] ?>" <? if($item['code']==$add1){?>selected<? }?>> <?= $item['name'] ?> </option> <? }?> </select> <!--<input type="hidden" value="" name="categoryMemoryIdsBackUp" id="categoryMemoryIdsBackUp"/> <label id="catLevB2Msg" class="error" for="catLevB_2" generated="true"></label> <label id="catLevB1Msg" class="error" for="catLevB_1" generated="true"></label>--> </dd> <dt><span class="red" id="BUSINESS_LICENSE_ADDRESS-x">*</span>公司详细地址</dt> <dd><input type="text" class="input" name="address" id="BUSINESS_LICENSE_ADDRESS" value=""/> <label class="error" id="BUSINESS_LICENSE_ADDRESS-s" style="display:none" >公司详细地址不能为空</label> </dd> <dt><span class="red">*</span>成立日期</dt> <dd> <input id="establishDate" type="text" class="input jdate narrow" onClick="WdatePicker()" name="birth_date" value=""/> <span class="error" id="establishDateSpan" > </span> </dd> <dt><span class="red">*</span>营业期限</dt> <dd> <input id="startDate" type="text" class="input jdate narrow" onClick="WdatePicker()" name="startdate" value=""/> — <input id="endDate" type="text" class="input jdate narrow" onClick="WdatePicker()" name="enddate" value=""/> <span class="error" id="dateSpan" > </span> </dd> <dt><span class="red" id="REGISTERED_CAPITAL-x">*</span>注册资本</dt> <dd><input type="text" class="input" name="reg_fee" id="REGISTERED_CAPITAL" value=""/>万元 <label class="error" id="REGISTERED_CAPITAL-s" style="display:none" >注册资本不能为空</label> </dd> <dt><span class="red" id="BUSINESS_SCOP-x">*</span>经营范围</dt> <dd> <textarea name="operate_col" id="BUSINESS_SCOP" style="font-size: 12px; width:300px; height: 70px;margin-top: 10px;"></textarea> <label class="error" id="BUSINESS_SCOP-s" style="display:none">经营范围不能为空</label> </dd> <dt><span class="red">*</span>营业执照副本电子版</dt> <dd class="deletePane"> <div id="fileList1"> </div> <div id="container1" > <input readonly=”readonly” type="text" id="url1" name='lisence_pic' value="" /><a id="pickButton1" href="javascript:void(0);" class="btn-vice" >上传</a> <span id="fileButton1" class="error"></span> </div> </dd> </dl> <div class="view-sample"> <div class="img-wrap"> <img src="../images/shop/shopapply/x_1.jpg" alt="" width="180" height="180" /> </div> <div class="t-c mt10"> <a href="../images/shop/shopapply/1.jpg" target="_blank" class="link-blue">查看大图</a> </div> </div> </div> </div> <!-- 店铺信息填写 --> <div class="m" > <div class="mt"> <h4 class="title">店铺信息填写</h4> </div> <div class="mc"> <dl class="horizontal fl"> <dt><span class="red" id="shop_name-x">*</span>店铺名称</dt> <dd> <input type="text" class="input" name="shopname" id="shop_name" value=""/> <label class="error" id="shop_name-s" style="display:none">店铺名称不能为空</label> </dd> </dl> </div> </div> </div> <div class="btn-group t-r"> <input type='submit' class="btn" id="nextStepBtn" value='确认提交，等待审核'> </div> </form> </div> <div class="clear"></div></div></body></html> 0 0
- jQuery表单验证 案例
- jQuery validate验证表单案例(源代码)
- 表单验证插件jQuery.validate 介绍+快速入门案例
- layui 表单验证案例
- jquery.formValidator 验证案例
- JQuery EasyUI表单-表单验证
- jquery 表单验证插件
- JQuery验证表单例子
- jQuery对表单验证
- jquery表单验证插件
- jquery表单验证
- jquery 通用表单验证
- jquery表单验证
- jquery重写表单验证
- jquery 表单验证框架
- jQuery validate 表单验证
- jquery表单验证
- jQuery表单验证
- Linux:C应用程序终端输出字体颜色的改变
- Java知识点
- Struts2中action之间的跳转
- github-->顺手抄
- 如何提高效率(In memory of Aaron Swarts)
- jQuery表单验证 案例
- P2P成长性不容小觑，金融工场交易额破7亿背后的启示
- python中xrange和range的异同
- 推荐引擎学习笔记（一）
- php数组函数集合（array）
- Jquery $.getJSON 在IE缓存问题
- Remove Duplicates from Sorted Array
- ActionBar 去掉标题栏 自定义
- struts2 action 跳action 传递中文乱码问题解决
