jquery.validate表单验证插件使用方法解析

为什么要用jquery validate这个表单验证插件：自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证，具体内容如下

使用方式

1、在控件中使用默认验证规则，例子：
电子邮件(必填)
<input id="email" class="required email" value="email@" />

2、可以在控件中自定义验证规则，例子：
自定义(必填,[3,5])

<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}" />

3、通过javascript自定义验证规则，下面的JS自定义了两个规则，password和confirm_password

$().ready(function() { $("#form2").validate({ rules: {  password: {  required: true,  minlength: 5  },  confirm_password: {  required: true,  minlength: 5,  equalTo: "#password"  } }, messages: {  password: {  required: "没有填写密码",  minlength: jQuery.format("密码不能小于{0}个字符")  },  confirm_password: {  required: "没有确认密码",  minlength: "确认密码不能小于{0}个字符",  equalTo: "两次输入密码不一致嘛"  } } });});

required除了设置为true/false之外，还可以使用表达式或者函数，比如

$("#form2").validate({ rules: { funcvalidate: { required: function() {return $("#password").val()!=""; } } }, messages: { funcvalidate: { required: "有密码的情况下必填" } }});

Html

密码<input id="password" name="password" type="password" />
确认密码<input id="confirm_password" name="confirm_password" type="password" />
条件验证<input id="funcvalidate" name="funcvalidate" value="" />

4、使用meta自定义验证信息

首先用JS设置meta

$("#form3").validate({ meta: "validate" });           

Html

email<input class="{validate:{required:true, email:true, messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}}"/>

5、使用meta可以将验证规则写在自定义的标签内，比如validate

JS设置meta

$().ready(function() { $.metadata.setType("attr", "validate"); $("#form1").validate();});

Html

Email
代码如下:<input id="email" name="email" validate="{required:true, email:true, messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}" />

6、自定义验证规则

对于复杂的验证，可以通过jQuery.validator.addMethod添加自定义的验证规则

官网提供的additional-methods.js里包含一些常用的验证方式，比如lettersonly，ziprange，nowhitespace等