jquery.validate.js 应用例子

jquery.validate.js 应用例子

文章分类:Web前端

   验证表单是我们经常需要做的，今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/)，研究了一下发现他不光强大而且十分易于上手。真是不用不知道，一种真奇妙啊！

   下面附上我写的一个小例子：

Html代码  收藏代码
  1. jquery.validate.js  
Html代码  收藏代码
  1. <script>  
  2. function checkidcard(num){  
  3.     var len = num.length, re;  
  4.     if (len == 15)  
  5.         re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);  
  6.     else if (len == 18)  
  7.         re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);  
  8.     else{  
  9.         //alert("请输入15或18位身份证号,您输入的是 "+len+ "位");   
  10.         return false;  
  11.     }  
  12.     var a = num.match(re);  
  13.     if (a != null){  
  14.         if (len==15){  
  15.             var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);  
  16.             var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];  
  17.         }else{  
  18.             var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);  
  19.             var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];  
  20.         }  
  21.         if (!B){  
  22.             //alert("输入的身份证号 "+ a[0] +" 里出生日期不对！");   
  23.             return false;  
  24.         }  
  25.     }  
  26.   
  27.     return true;  
  28. }   
  29. </script>  
  30.   
  31. <script type="text/javascript">  
  32.     $.validator.setDefaults({  
  33.         submitHandler: function() { alert("submitted!"); }  
  34.     });  
  35.       
  36.     // 添加验证方法 (身份证号码验证)  
  37.     jQuery.validator.addMethod("isIdCardNo", function(value, element) {     
  38.         return this.optional(element) || checkidcard(value);     
  39.     }, "请正确输入您的身份证号码");   
  40.       
  41.     $().ready(function() {  
  42.         $("#firstform").validate();  
  43.           
  44.         $("#secondform").validate({  
  45.             /*errorLabelContainer: "#messageBox",       //显示错误信息的容器ID  
  46.             wrapper: "li",                              //包含每个错误信息的容器*/  
  47.             rules:{  
  48.                 xm:{  
  49.                     required: true,  
  50.                     minlength: 2,  
  51.                     maxlength: 5  
  52.                 },  
  53.                 pwd:{  
  54.                     required: true,  
  55.                     minlength: 6  
  56.                 },  
  57.                 confirm_pwd:{  
  58.                     required: true,  
  59.                     equalTo: "#pwd"  
  60.                 },  
  61.                 f2csrq:{  
  62.                     required: true,  
  63.                     date: true  
  64.                 },  
  65.                 f2xjzd: {  
  66.                     required: true    
  67.                 },  
  68.                 f2sfzh:{  
  69.                     /*digits: true,  
  70.                     rangelength: [18,20]*/  
  71.                     required: true,  
  72.                     isIdCardNo: true  
  73.                 }  
  74.             },  
  75.             messages:{  
  76.                 xm:{  
  77.                     required: "请填写姓名",  
  78.                     minlength: "字符长度不能小于2个字符",  
  79.                     maxlength: "字符长度不能大于5个字符"  
  80.                 },  
  81.                 pwd:{  
  82.                     required: "请填写密码",  
  83.                     minlength: "字符长度不能小于6个字符"  
  84.                 },  
  85.                 confirm_pwd:{  
  86.                     required: "请再次输入密码",  
  87.                     equalTo: "密码不一致"  
  88.                 },  
  89.                 f2csrq:{  
  90.                     required: "请输入出生日期",  
  91.                     date: "日期格式不正确(例：2009/04/07)"  
  92.                 },  
  93.                 f2xjzd:{  
  94.                     required: "请输入地址"     
  95.                 },  
  96.                 f2sfzh:{  
  97.                     /*digits: "身份证号码只能为数字",  
  98.                     rangelength: "身份号码长度为18～20个字符"*/  
  99.                     required: "请输入身份证号",  
  100.                     isIdCardNo: "身份证号不正确"  
  101.                 }  
  102.             }  
  103.         });  
  104.           
  105.         /*// 输入框获得焦点时，样式设置     
  106.         $('input').focus(function(){     
  107.             if($(this).is(":text") || $(this).is(":password"))     
  108.                 $(this).addClass('focus');     
  109.             if ($(this).hasClass('have_tooltip')) {     
  110.                 $(this).parent().parent().removeClass('field_normal').addClass('field_focus');     
  111.             }     
  112.         });     
  113.           
  114.         // 输入框失去焦点时，样式设置     
  115.         $('input').blur(function() {     
  116.             $(this).removeClass('focus');     
  117.             if ($(this).hasClass('have_tooltip')) {     
  118.                 $(this).parent().parent().removeClass('field_focus').addClass('field_normal');     
  119.             }     
  120.         });*/  
  121.     });  
  122. </script>  
Html代码  收藏代码
  1. <div id="header"></div>  
  2. <div id="main">  
  3.   
  4. <form id="firstform" method="get" action="">  
  5.     <fieldset>  
  6.         <legend>jQuery验证</legend>     
  7.         <div id="xm" class="owinput">  
  8.             <div class="owlabel">  
  9.                 <label class="req" for="xm"> 姓  名 :</label>  
  10.             </div>  
  11.             <div class="owfield">  
  12.                 <span class="inp"> <input name="xm" class="required" minlength="2"> </span>  
  13.             </div>  
  14.         </div>  
  15.           
  16.         <div id="xb" class="owinput">  
  17.             <div class="owlabel">  
  18.                 <label class="req" for="f1pwd"> 密  码 :</label>  
  19.             </div>  
  20.             <div class="owfield">  
  21.                 <span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span>  
  22.             </div>  
  23.         </div>  
  24.           
  25.         <div id="xb" class="owinput">  
  26.             <div class="owlabel">  
  27.                 <label class="req" for="f1pwd2"> 密码确认 :</label>  
  28.             </div>  
  29.             <div class="owfield">  
  30.                 <span class="inp"> <input value="" name="f1pwd2" type="text" class="required" equalTo="#f1pwd"> </span>  
  31.             </div>  
  32.         </div>  
  33.           
  34.         <div id="csrq" class="owinput">  
  35.             <div class="owlabel">  
  36.                 <label class="req" for="f1csrq"> 出生日期 :</label>  
  37.             </div>  
  38.             <div class="owfield">  
  39.                 <span class="inp"> <input name="f1csrq" type="text" class="required date"> </span>  
  40.             </div>  
  41.         </div>  
  42.           
  43.         <div id="xjzd" class="owinput">  
  44.             <div class="owlabel">  
  45.                 <label class="req" for="f1xjzd"> 现居住地 :</label>  
  46.             </div>  
  47.             <div class="owfield">  
  48.                 <span class="inp"> <input  name="f1xjzd" type="text" class="required"> </span>  
  49.             </div>  
  50.         </div>  
  51.           
  52.         <div id="sfzh" class="owinput">  
  53.             <div class="owlabel">  
  54.                 <label class="req" for="f1sfzh"> 身份证号 :</label>  
  55.             </div>  
  56.             <div class="owfield">  
  57.                 <span class="inp"> <input name="f1sfzh" type="text" class="required isIdCardNo" minlength="18" maxlength="19"> </span>  
  58.             </div>  
  59.         </div>           
  60.     </fieldset>  
  61.       
  62.     <div id="regSubmit">  
  63.         <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">  
  64.             <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提  交</button><b class="bl"><b class="br"></b></b>  
  65.         </span>  
  66.         <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">  
  67.             <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>  
  68.         </span>  
  69.     </div>  
  70. </form>  
  71.       
  72. <form id="secondform">      
  73.     <fieldset>  
  74.         <legend>自定义jQuery验证</legend>  
  75.         <div id="xm" class="owinput">  
  76.             <div class="owlabel">  
  77.                 <label class="req" for="xm"> 姓  名 :</label>  
  78.             </div>  
  79.             <div class="owfield">  
  80.                 <span class="inp"> <input name="xm" type="text"> </span>  
  81.             </div>  
  82.         </div>  
  83.           
  84.         <div id="xb" class="owinput">  
  85.             <div class="owlabel">  
  86.                 <label class="req" for="pwd"> 密  码 :</label>  
  87.             </div>  
  88.             <div class="owfield">  
  89.                 <span class="inp"> <input id="pwd" name="pwd" type="text"> </span>  
  90.             </div>  
  91.         </div>  
  92.           
  93.         <div id="xb" class="owinput">  
  94.             <div class="owlabel">  
  95.                 <label class="req" for="confirm_pwd"> 密码确认 :</label>  
  96.             </div>  
  97.             <div class="owfield">  
  98.                 <span class="inp"> <input name="confirm_pwd" type="text"> </span>  
  99.             </div>  
  100.         </div>  
  101.           
  102.         <div id="csrq" class="owinput">  
  103.             <div class="owlabel">  
  104.                 <label class="req" for="f2csrq"> 出生日期 :</label>  
  105.             </div>  
  106.             <div class="owfield">  
  107.                 <span class="inp"> <input name="f2csrq" type="text"> </span>  
  108.             </div>  
  109.         </div>  
  110.           
  111.         <div id="xjzd" class="owinput">  
  112.             <div class="owlabel">  
  113.                 <label class="req" for="f2xjzd"> 现居住地 :</label>  
  114.             </div>  
  115.             <div class="owfield">  
  116.                 <span class="inp"> <input value="" name="f2xjzd" type="text"> </span>  
  117.             </div>  
  118.         </div>  
  119.           
  120.         <div id="sfzh" class="owinput">  
  121.             <div class="owlabel">  
  122.                 <label class="req" for="f2sfzh"> 身份证号 :</label>  
  123.             </div>  
  124.             <div class="owfield">  
  125.                 <span class="inp"> <input name="f2sfzh" type="text"> </span>  
  126.             </div>  
  127.         </div>     
  128.     </fieldset>  
  129.     <div id="messageBox"></div> <!-- 此容器用于汇总显示错误信息 -->  
  130.     <div id="regSubmit">  
  131.         <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">  
  132.             <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提  交</button><b class="bl"><b class="br"></b></b>  
  133.         </span>  
  134.         <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">  
  135.             <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>  
  136.         </span>  
  137.     </div>  
  138. </form>  
  139. </div>  
  140. <div id="footer"></div>  
posted @ 2011-05-20 11:03  ttjia  阅读(1622)  评论(0)  编辑  收藏  举报