一、简单应用实例：
1.用class样式进行验证，用法简单，但不能自定义错误信息，只能修改jquery-1.4.1.min.js中的内置消息，也不支持高级验证规则。
<script type="text/javascript" language="javascript" src="https://www.jb51.net/Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" language="javascript" src="https://www.jb51.net/Scripts/jquery.validate.min.js"></script> <h2>ValidateTest</h2> <form action="post"> <table cellpadding="0" cellspacing="0"> <tr> <td> <input type="text" /></td> </tr> <tr> <td> <input type="password" /></td> </tr> <tr> <td> <input type="submit" value="submit" /> </td> </tr> </table> </form> <script language="javascript" type="text/javascript"> function checkInput() { if ($("#loginForm").valid()) { return true; } return false; } </script>
当然，如果不希望使用onclick事件进行提交验证，也可以在页面加载时加上jQuery的监控，代码如下：
$(document).ready(function () { jQuery("#loginForm").validate(); });
这时就不需要在提交按钮上加这个事件了。
2.使用Json字符串验证，使用该规则验证，必须额外引入jquery.metadata.pack.js文件
修改上面的两个INPUT如下：
<input type="text" /> <input type="password" />
可以看到，我们已经可以自定义错误消息了。
另外必须在页面中加上以下代码：
$(document).ready(function () { $("#loginForm").validate({ meta: "validate" }); });
二、验证规则的应用
1.使用class验证的规则：
在class中可以使用：required，email，number，url，date，dateISO，dateDE，digits，creditcard，phoneUS
可以增加属性：minlength，maxlength，min，max，accept，remote（注：请检查是否返回是bool还是xml），equalTo='#password'
没有找到使用办法的内置方法：required(dependency-expression)，required(dependency-callback)，range，rangelength
2.使用Json对象验证的规则：
在class中进行如下定义：class=“{validate:{required:true,minlength:6,messages:{required:'请输入密码',minlength:'密码太短啦至少6位'}}}”
我们仍可进行以下定义：number:true, email:true, url:true, date:true, dateISO:true, dateDE:true, digits:true, creditcard:true, phoneUS:true
min:3, max:10, minlength:3, maxlength:10，required: '#other:checked'【此处表达式函数为required(dependency-expression)】
相比使用class来说，我们已经可以使用range方法了，可定义为数字range:[3,10]，字符串长度rangelength:[3,10]，remote:url，accept:'.csv|.jpg|.doc|.docx', equalTo:'#Password'
没有找到使用方法的内置方法：required(dependency-callback)
三、高级验证方法
在前面说到的简单验证中，使用起来非常简单，有些傻瓜式的味道，但毕竟有些内置规则不能使用。但要想做到灵活运用，还是需要通过JS编码来完成。这样不但所有的内置规则可以使用，而且我们还可以自定义验证规则。以下实例我从易到难逐个列出：
1.编写JS的简单方法
仍以登录验证为例：
<script type="text/javascript" language="javascript" src="https://www.jb51.net/Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" language="javascript" src="https://www.jb51.net/Scripts/jquery.validate.min.js"></script> <h2>Validate-High</h2> <form action="" method="post"> <table cellpadding="0" cellspacing="0"> <tr> <td> <input type="text" /> </td> </tr> <tr> <td> <input type="password" /> </td> </tr> <tr> <td> <input type="submit" value="submit"/> </td> </tr> </table> </form> <script language="javascript" type="text/javascript"> $(document).ready(function () { var validateOpts = { rules: { UserEmail: { required: true, email: true }, Password: { required: true } }, messages: { UserEmail: { required: "请输入邮箱地址", email: "邮箱地址不正确" }, Password: { required: "请输入密码" } } }; $("#loginForm").validate(validateOpts); }); </script>
我们只需设置validate的参数即可。
2.equalTo的使用，一般在注册时会用到
<script type="text/javascript" language="javascript" src="https://www.jb51.net/Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" language="javascript" src="https://www.jb51.net/Scripts/jquery.validate.min.js"></script> <h2>ValidateHigh</h2> <form action="" method="post"> <table cellpadding="0" cellspacing="0"> <tr> <td> <input type="text" /> </td> </tr> <tr> <td> <input type="password" /> </td> </tr> <tr> <td> <input type="password" /> </td> </tr> <tr> <td> <input type="submit" value="submit"/> </td> </tr> </table> </form> <script language="javascript" type="text/javascript"> $(document).ready(function () { var validateOpts = { rules: { UserEmail: { required: true, email: true }, Password: { required: true }, RePassword: { equalTo: "#Password" } }, messages: { UserEmail: { required: "请输入邮箱地址", email: "邮箱地址不正确" }, Password: { required: "请输入密码" }, RePassword: { equalTo: "两次输入密码必须相同" } } }; $("#loginForm").validate(validateOpts); }); </script>
3.required(dependency-callback)的使用，绿色字体。
var validateOpts = { rules: { age: { required: true, min: 3 }, parent: { required: function (element) { return $("#age").val() < 13; } } } }
4.自定义规则，使用addMethod方法，如下：