jquery_validation插件辅助资料

版权声明：本文为博主原创文章，未经博主允许不得转载。

jQuery Validate 客户端验证插件辅助资料 【】jQuery Validate网址 http://jqueryvalidation.org/ 【】jQuery validation引入 先引入jQuery,再引入jquery validation插件，以及支持I18N的插件文件 <script type="text/javascript" src="../jqueryvalidate/jquery.validate.min.js"></script> <script type="text/javascript" src="../jqueryvalidate/localization/messages_zh.min.js"></script> 【】jQuery validation插件的使用 1.定义表单 可以使用HTML form表单元素，也可以使用Struts2表单元素 <%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s" %> <s:form id="departmentaddform" action="../department/add.action" method="post"> <s:textfield id="departmentcode" name="dv.code" label="部门编码"></s:textfield> <s:textfield id="departmentname" name="dv.name" label="部门名称"></s:textfield> <s:submit value="提交"></s:submit> </s:form> 2.JavaScript引入jQuery validation  //部门表单验证  $("form#departmentaddform").validate({ rules: {        "dv.code": {            required: true,            rangelength: [5,10]        },        "dv.name":{ required: true        } }  }); 【】jQuery validation常用的验证规则 默认校验规则   (1)required:true               必输字段   (2)remote:"check.php"          使用ajax方法调用check.php验证输入值   (3)email:true                  必须输入正确格式的电子邮件   (4)url:true                    必须输入正确格式的网址   (5)date:true                   必须输入正确格式的日期   (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  【】验证规则的使用 $().ready(function() {   $("#signupForm").validate({           rules: {   firstname: "required",   email: {      required: true,      email: true   },   password: {      required: true,      minlength: 5   },   confirm_password: {      required: true,      minlength: 5,      equalTo: "#password"   }      },           messages: {      firstname: "请输入姓名",      email: {       required: "请输入Email地址",       email: "请输入正确的email地址"      },      password: {       required: "请输入密码",       minlength: jQuery.format("密码不能小于{0}个字符")      },      confirm_password: {       required: "请输入确认密码",       minlength: "确认密码不能小于5个字符",       equalTo: "两次输入密码不一致不一致"      }   }       });   });   【】常用验证规则的使用 1.required 必填 $( "#myform" ).validate({   rules: {     username: {       required: true     }   } }); 2. remote 远程验证 $( "#myform" ).validate({   rules: {     email: {       required: true,       email: true,       remote: "check-email.php"     }   } }); 3.minlength  field: {       required: true,       minlength: 3     } 4.maxlength field: {       required: true,       maxlength: 4     } 5.rangelength  field: {       required: true,       rangelength: [2, 6]     } 7.min,max, range  field: {       required: true,       min: 13,       max:20,       range:[10,20]     } 8.date 必须是date类型 field: {       required: true,       date: true     } 9.number 输入必须是数值  field: {       required: true,       number: true     } 10.equalTo 与另一个元素相等 rules: {     password: "required",     password_again: {       equalTo: "#password"     }   } 在使用 equalTo 关键字时，后面的内容必须加上引号，代码如下所示： equalTo:'#password' 11. accept 文件域文件接收限制验证，Makes a file upload accept only specified mime-types. 指定MIME类型，如image/*,  多个限制，使用逗号间隔。 $( "#myform" ).validate({   rules: {     field: {       required: true,       accept: "audio/*,image/jpeg"     }   } }); 【】通过AJAX调用远程URL进行验证 $( "#myform" ).validate({   rules: {     email: {       required: true,       email: true,       remote: "check-email.php"     }   } }); 通过remote:"url",   //调用url指定的服务器端请求地址进行验证 remote：URL   使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项   remote: "check-email.php"   remote: {       url: "check-email.php",     //后台处理程序       type: "post",               //数据发送方式       dataType: "json",           //接受数据格式          data: {                     //要传递的数据           username: function() {               return $("#username").val();           }       }   }   远程地址只能输出 "true" 或 "false"，不能有其它输出   【】jQuery validation自定义验证规则 addMethod：name, method, message   自定义验证方法   // 中文字两个字节   jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {       var length = value.length;       for(var i = 0; i < value.length; i++){           if(value.charCodeAt(i) > 127){               length++;           }       }   return this.optional(element) || ( length >= param[0] && length <= param[1] );      }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));   // 邮政编码验证      jQuery.validator.addMethod("isZipCode", function(value, element) {          var tel = /^[0-9]{6}$/;       return this.optional(element) || (tel.test(value));   }, "请正确填写您的邮政编码");   //jQuery.validate的optional(element)，用于表单控件的值不为空时才触发验证 此时定义的byteRangeLength,isZipCode规则可以像内置规则一样使用。 postcode:{     isZipCode:true }, // jQuery.validator.addMethod("laxEmail", function(value, element) {   // allow any non-whitespace characters as the host part   return this.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:\S{1,63})$/.test( value ); }, 'Please enter a valid email address.'); 【】常用的自定义验证案例： jQuery.validator.addMethod("byteMaxLength", function(value,                       element, param) {                   var length = value.length;                   for ( var i = 0; i < value.length; i++) {                       if (value.charCodeAt(i) > 127) {                           length++;                       }                   }                   return this.optional(element) || (length <= param);               }, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));   jQuery.validator.addMethod("numFormat",function(value,element,param){                return this.optional(element) ||  /^\d*$/.test(value);               }               //,$.validator.format("请输入数字{0}位以内")               );   //number(9,3)   jQuery.validator.addMethod("numFormat63",function(value,element){                return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);               },$.validator.format("请输入合法数字,精度格式123456.0")               );   jQuery.validator.addMethod("postcodeVal",function(value,element){                return this.optional(element) || /^[0-9]\d{5}(?!\d)$/.test(value);               },$.validator.format("请输入合法的邮编")   );   jQuery.validator.addMethod("numberAndLettersVal",function(value,element){                return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);               },$.validator.format("请输入字母或数字")   );   jQuery.validator.addMethod("sfzhValidate",function(value,element){                return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);               },$.validator.format("请输入合法身份证号")   );   jQuery.validator.addMethod("valiEnglish",function(value,element){                return this.optional(element) || /^[a-zA-Z ]*$/.test(value);               },$.validator.format("请输入字母或者空格")   );   【】验证的提示: 默认提示 messages: {   required: "This field is required.",   remote: "Please fix this field.",   email: "Please enter a valid email address.",   url: "Please enter a valid URL.",   date: "Please enter a valid date.",   dateISO: "Please enter a valid date (ISO).",   dateDE: "Bitte geben Sie ein gültiges Datum ein.",   number: "Please enter a valid number.",   numberDE: "Bitte geben Sie eine Nummer ein.",   digits: "Please enter only digits",   creditcard: "Please enter a valid credit card number.",   equalTo: "Please enter the same value again.",   accept: "Please enter a value with a valid extension.",   maxlength: $.validator.format("Please enter no more than {0} characters."),   minlength: $.validator.format("Please enter at least {0} characters."),   rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),   range: $.validator.format("Please enter a value between {0} and {1}."),   max: $.validator.format("Please enter a value less than or equal to {0}."),   min: $.validator.format("Please enter a value greater than or equal to {0}.") }, 如果要修改默认的验证消息，使用如下方法： jQuery.extend(jQuery.validator.messages, {   required: "必选字段",   remote: "请修正该字段",   email: "请输入正确格式的电子邮件",   url: "请输入合法的网址",   date: "请输入合法的日期",   dateISO: "请输入合法的日期 (ISO).",   number: "请输入合法的数字",   digits: "只能输入整数",   creditcard: "请输入合法的信用卡号",   equalTo: "请再次输入相同的值",   accept: "请输入拥有合法后缀名的字符串",   maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),   minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),   rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),   range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),   max: jQuery.validator.format("请输入一个最大为{0} 的值"),   min: jQuery.validator.format("请输入一个最小为{0} 的值") }); 【】验证规则中直接写验证消息文本 $().ready(function() {  $("#signupForm").validate({         rules: {    firstname: "required",    email: {     required: true,     email: true    },    password: {     required: true,     minlength: 5    },    confirm_password: {     required: true,     minlength: 5,     equalTo: "#password"    }   },         messages: {    firstname: "请输入姓名",    email: {     required: "请输入Email地址",     email: "请输入正确的email地址"    },    password: {     required: "请输入密码",     minlength: jQuery.format("密码不能小于{0}个字 符")    },    confirm_password: {     required: "请输入确认密码",     minlength: "确认密码不能小于5个字符",     equalTo: "两次输入密码不一致不一致"    }   }     }); });