jquery.validate简单使用

原创 Laughing  2017-08-03 21:29  阅读 323 次 评论 0 条


jquery.validate插件可是使我们实现功能各种复杂功能的验证,而且jquery.validate插件使用非常简单

插件安装

  1. <script src="js/jQuery/jquery-3.2.1.js" type="text/javascript"></script>  
  2. <script src="js/jQuery/jquery.validate.js" type="text/javascript"></script>  
  3. <script src="js/jQuery/messages_zh.js" type="text/javascript"></script>  

使用自带的验证规则

jquery.validate自带了很多验证规则,包括是否数字,最大、最小字符长度,以及长度范围、是否邮箱、两个控件值是否相等等等。我们在项目上一般是习惯把验证放到js代码块中,如下是一个简单的用户注册页面的验证规则

  1. $(function(){  
  2.     $("#singnUp").validate({  
  3.         debug:true,//只验证   不提交表单  
  4.         rules:{  
  5.           firstName:{  
  6.               required:true,  
  7.               minlength:2  
  8.           },  
  9.           lastName:{  
  10.             required:true,  
  11.             maxlength:8  
  12.           },  
  13.           userName:{  
  14.             required:true,  
  15.             minlength:5,  
  16.             maxlength:10  
  17.           },  
  18.           pwd:{  
  19.             required:true,  
  20.             minlength:8,  
  21.             maxlength:20  
  22.           },  
  23.           pwd2:{  
  24.             required:true,  
  25.             minlength:8,  
  26.             equtalTo:"#pwd"  
  27.           },  
  28.           email:{  
  29.             required:true,  
  30.             email:true  
  31.           },  
  32.           zipCode:{  
  33.             isZipCode:true  
  34.           }  
  35.         },  
  36.         messages:{  
  37.           firstName:{  
  38.             required:"请输入用户姓",  
  39.             minlength:"用户名不能小于两位字符"  
  40.           }  
  41.         }  
  42.     });  
  43. });  
  44. </script>  
  1. <style>  
  2. .error{  
  3. color:red;  
  4. }  
  5. </style>  
  6.   
  7. <form action="" method="get" class="panel-body" id="singnUp">  
  8.   <fieldset>  
  9.     <legend>用户注册</legend>  
  10.         <p>  
  11.           <label for="firstName">姓</label>  
  12.           <input type="text" id="firstName" name="firstName"/>  
  13.         </p>  
  14.         <p>  
  15.             <label for="lastName">名</label>  
  16.             <input type="text" id="lastName" name="lastName" />  
  17.         </p>  
  18.         <p>  
  19.           <label for="userName">用户名</label>  
  20.           <input type="text" id="userName" name="userName" />  
  21.         </p>  
  22.         <p>  
  23.           <label for="password">密码</label>  
  24.           <input type="password" id="pwd" name="pwd" />  
  25.         </p>  
  26.         <p>  
  27.           <label for="pwd2">重复密码</label>  
  28.           <input type="password" id="pwd2" name="pwd2" />  
  29.         </p>  
  30.         <p>  
  31.           <label for="email">邮箱</label>  
  32.           <input type="email" id="email" name="email" />  
  33.         </p>  
  34.         <p>  
  35.           <label for="zipCode">邮政编码</label>  
  36.           <input type="text" id="zipCode" name="zipCode" />  
  37.         </p>  
  38.   <button type="submit">提交</button>  
  39. </fieldset>  
  40. </form>  

添加自定义验证方法

对于不能满足条件的验证,我们还可以添加自己的验证方法,如下:

  1. jQuery.validator.addMethod("isZipCode",function(value,element,param){  
  2.   var tel = /^[0-9]{6}$/;  
  3.   return this.optional(element) || (tel.test(value))  
  4. },'请输入正确的邮政编码');  

然后在验证规则中调用isZipCode:true就可以了

其他一些属性

在我们调试的过程中,常常是希望只触发验证条件,但是不提交表单,那么我们可以设置isDebug:true就可以了

未完待续。。。。。。

本文地址:https://www.lisen.me/jquery-validate-is-simple-to-use.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情