JQurey Validation表单验证使用详解

4、应用Validation插件

调用Validation插件的方法：

$(function(){
  var validate = $("#myform").validate({
     rules:{ //定义验证规则
      ......
     },
     messages:{ //定义提示信息
      ......
     }
  })
}); 

rules:定义验证规则，key:value的形式，key是要验证的元素,value可以是字符串或对象。比如验证用户名的长度和不允许为空：

rules:{
 user:{
   required:true,
   maxlength:16,
   minlength:3
 },
 ......
} 

其实我们在XHTML代码中可以直接指定input的class属性为required，作用是不允许为空，这样在JS部分就不用重复写了。同样的验证email等，直接设置input的class属性为email。

messages:定义提示信息，key:value的形式key是要验证的元素,值是字符串或函数，当验证不通过时提示的信息。

messages:{
 user:{
   required:"用户名不能为空！",
   remote:"该用户名已存在，请换个其他的用户名！"
 },
 ......
} 

本例中涉及的验证JS就是按照上面的规则进行编写的，Validation插件封装了好多基本的验证方式，如下：

required:true 必须有值，不能为空

remote:url 可以用于判断用户名等是否已经存在,服务器端输出true,表示验证通过

minlength:6 最小长度为6

maxlength:16 最大长度为16

rangelength:长度范围

range:[10,20] 数值范围在10-20之间

email:true 验证邮件

url:true 验证URL网址

dateISO:true 验证日期格式’yyyy-mm-dd’

digits:true 只能为数字

accept:’gif|jpg’ 只接受gif或jpg为后缀的图片。常用于验证文件的扩展名

equalTo:’#pass’ 与哪个表单字段的值相等，常用于验证重复输入密码

此外，我还根据项目实际情况扩展了几个验证，验证的代码在validate-ex.js，使用前需要先加载这个JS。它能提供以下验证：

userName:true 用户名只能包括中文字、英文字母、数字和下划线

isMobile:true 手机号码验证

isPhone:true 大陆手机号码验证

isZipCode:true 邮政编码验证

isIdCardNo:true 大陆身份证号码验证

ip:true IP地址验证

以上提供的验证方式基本上满足我们在大多数项目中的需求。如果其他特殊验证需求，可以扩展，方法如：

jQuery.validator.addMethod("isZipCode", function(value, element) {
 var zip = /^[0-9]{6}$/;
 return this.optional(element) || (zip.test(value));
}, "请正确填写您的邮政编码!"); 

疑难问题解决

1、在项目中遇到在验证用户名是否存在时，发现不支持中文输入验证。我的解决办法是给用户名进行encodeURIComponent编码，后台