表单验证插件jquery.validate的使用方法演示

这是一款基于jquery的表单验证插件。由于其兼容性和易用性受到前端开发者的青睐!本文将介绍如何快速地应用jquery.validate插件进行表单验证。
jQueryValidate表单验证效果
jQueryValidate表单验证效果

 

jquery.validate验证错误信息的样式控制

  1. <!--validate验证插件的基础样式--> 
  2. input.error{border1px solid red
  3. label.error{ 
  4.   background:url("../images/unchecked.gif"no-repeat 0px 0px
  5.   padding-left:16px
  6.   padding-bottom:2px
  7.   font-weight:bold
  8.   color:#ea5200
  9. label.checked { 
  10.   background:url("../images/checked.gif"no-repeat 0px 0px

需要的图标:红色的×和绿色的√

引入jquery.validate插件文件

  1. <script src="exp99.com/validate/jquery.min.js"></script><!--jquery库文件--> 
  2. <script src="exp99.com/validate/jquery.validate.min.js"></script><!--validate插件--> 
  3. <script src="exp99.com/validate/language.validate.js"></script><!--语言汉化--> 

待验证的表单控件HTML结构

  1. <form method="post" id="myForm"> 
  2.     <input type="text" name="name" class="required"> 
  3.     <input type="text" name="email" class="required email"> 
  4.     <input type="password" name="password"  class="{required:true,minlength:5}" /> 
  5.     <input type="submit" /> 
  6. </form> 

jquery.validate插件常用的验证写法

  1. validate验证规则写在表单控件里(如上面的html结构)
  2. validate验证规则写在js代码里
    1. $(function(){  
    2.     $("#myform").validate({ 
    3.         rules: { 
    4.             firstname: "required",  
    5.             email: {required: true, email: true},  
    6.             password: {required: true, minlength: 5}  
    7.         }, 
    8.         //指定错误显示的位置 
    9.         errorPlacement: function(error, element) {      
    10.         if (element.attr("name") == "username" ) {//控件的name
    11.             error.appendTo("#error_username");//显示错误的容器   
    12.         }    
    13.         else        
    14.             error.insertAfter(element);    
    15.         } 
    16.     }); 
    17. }) 

说明:使用class="{}"的验证方式,必须引入包:jquery.metadata.js

jquery.validate插件开始表单验证

  1. $(function(){ 
  2.     //默认submit提交 
  3.     if($('#myForm').valid()){//如果验证通过 
  4.         //do sth here 
  5.         console.log('验证通过!');    
  6.     } 
  7.     //通过外部方式代替submit提交 
  8.     $("#myForm").validate({ 
  9.         submitHandler:function(form){ 
  10.             form.submit(); 
  11.         }     
  12.     }); 
  13. }) 

 


 

以上就是常规的验证部署方法。下面了解下jquery.validate强大之处!

默认的检验规则

规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

jquery.validate已有的验证规则 

  1. /*validator 语言包*/ 
  2. jQuery.extend(jQuery.validator.messages, { 
  3.     required:"必填字段"
  4.     remote: "请修正该字段"
  5.     email: "请输入正确格式的电子邮件"
  6.     url: "请输入合法的网址"
  7.     date: "请输入合法的日期"
  8.     dateISO: "请输入合法的日期 (ISO)."
  9.     number: "请输入合法的数字"
  10.     digits: "只能输入整数"
  11.     creditcard: "请输入合法的信用卡号"
  12.     equalTo: "请再次输入相同的值"
  13.     accept: "请输入拥有合法后缀名的字符串"
  14.     maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"), 
  15.     minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"), 
  16.     rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"), 
  17.     range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), 
  18.     max: jQuery.validator.format("请输入一个最大为{0} 的值"), 
  19.     min: jQuery.validator.format("请输入一个最小为{0} 的值"
  20. });  

添加jquery.validate的自定义校验

 语法:addMethod:name, method, message

举例:中文的验证

  1. // 中文的验证  
  2. jQuery.validator.addMethod("chinese"function(value, element) {  
  3. var chinese = /^[\u4e00-\u9fa5]+$/;  
  4. return this.optional(element) || (chinese.test(value));  
  5. }, "只能输入中文"); 

 

jquery.validate表单验证通过了却无法提交?

原因:由于表单验证插件在验证的时候开启了debug模式的缘故,屏蔽掉这句代码://debug:true;

 

还有很多详细的设置(正是jquery.validate表单验证插件的强大之处)访问官方API:http://jqueryvalidation.org/documentation/ 

jQuery Validation Plugin - v1.13.1 (提取码:2mgf)

 

相关经验

导读书签
书签初始化中…