JQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
使用JQuery Validate之前首先引入以下两个文件：jquery-1.11.1.js 和 jquery.validate.js。下载链接：https://jqueryvalidation.org。
菜鸟教程提供的 1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
直接上实例，html代码如下：
<div id="form_con"> ????????????????<form class="cmxform" id="myform" method="post" action=""> ???????????<table cellspacing="0" cellpadding="0"> ???????????????<tbody> ???????????????????<tr> ???????????????????????<td>用户名</td> ???????????????????????<td><input type="text" id="username" name="username" class="required" /></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>密码</td> ???????????????????????<td><input id="password" type="password" name="firstpwd" /></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>验证密码</td> ???????????????????????<td><input type="password" name="secondpwd" /></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>性别</td> ???????????????????????<td><input id="sex" type="radio" name="sex" />男<input type="radio" name="sex" />女</td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>年龄</td> ???????????????????????<td><input type="text" name="age" /></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>邮箱</td> ???????????????????????<td><input type="text" name="email" /></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????????????????????????<tr> ???????????????????????<td>时间</td> ???????????????????????<td><input type="date" name="time" /></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>个人网页</td> ???????????????????????<td><input type="text" name="purl" /></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>电话</td> ???????????????????????<td><input type="text" name="telephone" /></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr> ???????????????????????<td>附件</td> ???????????????????????<td><input type="file" name="afile"/></td> ???????????????????????<td></td> ???????????????????</tr> ???????????????????<tr><td colspan="3" ><input type="submit" name="submit" value="提交" /><button>重置</button></td></tr> ???????????????</tbody> ?????????????????????</table> ???????</form> ?</div> ?
新建一个validated.js文件用于验证以上表单数据：
$(function(){ ????var validator = $("#myform").validate({ ???????debug: true, ??????//调试模式取消submit的默认提交功能 ???????errorClass: "haha", //默认为错误的样式类为：error ???????focusInvalid: false, ????????????????focusCleanup: true, ???????onkeyup: false, ???????????????errorElement: "span", ?????????submitHandler: function(form) { ??//表单提交句柄,为一回调函数，带一个参数：form ???????????alert("提交表单"); ???????????form.submit(function() ???????????{ ???????????????return false; ???????????}); ??//提交表单 ???????}, ???????rules: { ??????????//定义验证规则,其中属性名为表单的name属性 ???????????username: { ???????????????required: true, ???????????????minlength: 2, ??????????????????????????????????remote: { ???????????????????url: "js/test.txt", ????//后台处理程序 ???????????????????type: "get", ??????????????//数据发送方式 ???????????????????//dataType: "text", ??????????//接受数据格式 ??????????????????????data: { ????????????????????//要传递的数据 ???????????????????????username: function() { ???????????????????????????return $("#username").val(); ????????????????????????} ???????????????????} ???????????????} ???????????????//response.getwrite().write("true") ???????????}, ???????????firstpwd: { ???????????????required: true, ???????????????//minlength: 6 ???????????????rangelength: [6, 8] ???????????}, ???????????secondpwd: { ???????????????required: true, ???????????????equalTo: "#password" ???????????}, ???????????sex: { ???????????????required: true ???????????}, ???????????age: { ???????????????required: true, ???????????????range: [0, 120] ???????????}, ???????????email: { ???????????????required: true, ???????????????email: true ???????????}, ???????????????????????telephone:{ ???????????????????????????????required:true, ???????????????????????????????isTelephone:true ???????????????????????????}, ???????????purl: { ???????????????required: true, ???????????????url: true ???????????}, ???????????afile: { ???????????????required: true, ???????????????accept: "xls,doc,rar,zip" ???????????} ???????}, ???????messages: { ??????//自定义验证消息 ???????????username: { ???????????????required: "用户名是必需的！", ???????????????minlength: $.validator.format("用户名至少要{0}个字符！"), ???????????????remote: $.validator.format("{0}已经被占用") ??????????????????????????}, ???????????firstpwd: { ???????????????required: "密码是必需的！", ???????????????rangelength: ?$.validator.format("密码要在{0}-{1}个字符之间！") ???????????}, ???????????secondpwd: { ???????????????required: "密码验证是必需的！", ???????????????equalTo: "密码验证需要与密码一致" ???????????}, ???????????sex: { ???????????????required: "性别是必需的" ???????????}, ???????????age: { ???????????????required: "年龄是必需的", ???????????????range: "年龄必须介于{0}-{1}之间" ???????????}, ???????????email: { ???????????????required: "邮箱是必需的！", ???????????????email: "请输入正确的邮箱地址（例如 myemail@163.com）" ???????????}, ???????????????????????telephone:{ ???????????????????????????????required: "手机号码是必需的！" ???????????????????????????}, ????????????????????purl: { ???????????????required: "个人主页是必需的", ???????????????url: "请输入正确的url格式,如 http://www.domainname.com" ???????????}, ???????????afile: { ???????????????required: "附件是必需的！", ???????????????accept: "只接收xls,doc,rar,zip文件" ???????????} ???????}, ???????errorPlacement: function(error, element) { ?//验证消息放置的地方 ???????????error.appendTo(element.parent("td").next("td")); ???????}, ???????highlight: function(element, errorClass) { ?//针对验证的表单设置高亮 ???????????$(element).addClass(errorClass); ???????}, ???????success: function(label) { ???????????label.addClass("valid").text("Ok!") ???????} ????????/*, ???????errorContainer: "#error_con", ??????????????//验证消息集中放置的容器 ???????errorLabelContainer: "#error_con ul", ??????//存放消息无序列表的容器 ???????wrapper: "li", ?????????????????????????????//将验证消息用无序列表包围 ???????validClass: "valid", ???????????????????????//通过验证的样式类 ???????errorElement: "span", ????????????????????????//验证标签的名称，默认为：label ???????success: "valid" ???????????????????????????//验证通过的样式类 ???????*/ ???}); ???// 手机号码验证 ??????jQuery.validator.addMethod("isTelephone", function(value, element) { ??????????var tel = /^1[358][0-9]{9}$/; ???????return tel.test(value); ???}, "请正确填写您的手机号码"); ???????$("button").click(function() { ???????validator.resetForm(); ???});});注意：
1.username属性是通过远程验证的，通过remote连接后台程序进行验证。代码如下：
remote: { ???????????????????url: "js/test.txt", ????//后台处理程序 ???????????????????type: "get", ??????????????//数据发送方式 ???????????????????//dataType: "text", ??????????//接受数据格式 ??????????????????????data: { ????????????????????//要传递的数据 ???????????????????????username: function() { ???????????????????????????return $("#username").val(); ????????????????????????} ???????????????????}2.telephone元素的验证是自定义添加的方法，代码如下：
// 手机号码验证 ??????jQuery.validator.addMethod("isTelephone", function(value, element) { ??????????var tel = /^1[358][0-9]{9}$/; ???????return tel.test(value); ???}, "请正确填写您的手机号码");addmethod里面有三个参数：name function message。 方法名称 调用方法 提示信息。
3.设置提示信息的地方：
errorPlacement: function(error, element) { ?//验证消息放置的地方 ???????????error.appendTo(element.parent("td").next("td")); ???????},可将常用的验证方法收集好，写成一个js文件，一般写在 additional-methods.js 文件中，方便以后自己代码调用。未完待续。。。
JQuery.Validate学习笔记
原文地址：http://www.cnblogs.com/sagacity-shen/p/7589219.html