jQuery 是一个快速、简单的JavaScript 库， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单。
废话不多说，开始demo演示：
前端html代码展示：
<h1>员工信息录入</h1>
<form name="empForm" id="empForm" method="get" action="#">
<table>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5-8之间:</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6-12之间):</td>
<td><input type="password" id="pwd" name="pwd" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6-12之间):</td>
<td><input type="password" id="pwd2" name="pwd2" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="male" value="m" name="sex" />男
<input type="radio" id="female" value="f" name="sex" />女
<label for="sex" class="error" style="display: none;">性别必选</label>
</td>
</tr>
<tr>
<td>年龄(必填26-50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历:</td>
<td>
<select name="edu" id="edu">
<option value="">－请选择你的学历－</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="hobby" id="pp" value="0" />乒乓球
<input type="checkbox" name="hobby" id="ym" value="1" />羽毛球
<input type="checkbox" name="hobby" id="sw" value="2" />上网
<input type="checkbox" name="hobby" id="ly" value="3" />旅游
<input type="checkbox" name="hobby" id="gw" value="4" />购物
<label for="hobby" class="error" style="display: none;">爱好必选</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15-18):</td>
<td><input type="text" id="idcard" name="idcard" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="smtBtn" value="保存"></td>
</tr>
</table>
</form>引入两个js文件：jquery-1.11.0.js(具体版本自己选择)和jquery.validate.js
因为jquery.validate.js自带的校验信息是英文，不便于用户体验，所以下面进行自定义校验信息，并自定义了身份证校验规则，其它（邮箱，手机号）的都是同理！
<style>
#registerForm label.error{
margin-left: 10px;
color:red;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript">
/*
* 自定义校验规则
* 参数：
* 1. 规则名称
* 2. 规则校验逻辑（匿名函数）
* 匿名函数的参数：
* a) value: 应用这项校验规则的表单项的值
* b) element: 应用这项规则的表单项标签对象
* c) params: 用户在使用规则的时候，规则的值
*/
$.validator.addMethod("idCard", function(value, element, params){
//校验逻辑代码，根据校验规则决定返回true或者false
var reg = /^\d{15}(\d{2}(\d|X))?$/i;
var result = reg.test(value);
if(!result){
element.style.backgroundColor = "blue";
}
//返回值 true表示校验通过，false表示校验不通过
return result;
});
$("#empForm").validate({
rules:{
realname:{
required:true
},
username:{
required: true,
rangelength:[5, 8]
},
pwd:{
required: true,
rangelength:[6, 12]
},
pwd2:{
required: true,
equalTo:"#pwd" // equalTo:"#pwd"，这个键值对里的value是元素的ID值
},
sex:{
required:true
},
age:{
required:true,
range:[26, 50],
digits:true
},
edu:{
required:true
},
hobby:{
required:true
},
email:{
required:true,
email:true
},
idcard:{
required:true,
idCard:true
}
},
messages:{
realname:{
required:"用户名不能为空"
},
username:{
required: "登录名不能为空",
rangelength:"登录名长度应该是5~8位"
},
pwd:{
required: "密码不能为空",
rangelength:"密码长度必须是6~12位"
},
pwd2:{
required: "确认密码不能为空",
equalTo:"两次密码输入不一致"
},
age:{
required:"年龄必填",
range:"年龄必须是26~50之间",
digits:"年龄必须是整数"
},
edu:{
required:"学历必选"
},
email:{
required:"邮箱必填",
email:"邮箱格式不正确"
},
idcard:{
required:"身份证必填",
idCard:"身份证格式不正确"
}
}
});
</script>通过以上测试，表单校验可以基本满足我们的简单需求，但是我们不可能每次都要去重新编写校验规则，这也重复量太大，所以我们只需要定义好常用的规则，放在一个js文件中，每次使用的话，我们可以在直接引用，也便于每次的修改，完善！
比如：以下就是我常用的并且自定义的jQueryFrom.js文件，这个完全根据自己的喜好定义！
$(function() {
//jquery.validate
$("#jsForm,#login").validate({
submitHandler: function() {
//验证通过后 的js代码写在这里
}
})
})
//下面是一些常用的验证规则扩展
//配置错误提示的节点，默认为label，这里配置成 span （errorElement:'span'）
//下面有图例展示
$.validator.setDefaults({
errorElement: 'span'
});
//配置通用的默认提示语
$.extend($.validator.messages, {
required: "这是必填字段",
remote: "请修正此字段",
email: "请输入有效的电子邮件地址",
url: "请输入有效的网址",
date: "请输入有效的日期",
number: "请输入有效的数字",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多可以输入 {0} 个字符"),
minlength: $.validator.format("最少要输入 {0} 个字符"),
rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
/*-------------扩展验证规则------------*/
//邮箱
jQuery.validator.addMethod("mail", function(value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");
//手机验证规则
jQuery.validator.addMethod("mobile", function(value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
//邮箱或手机验证规则
jQuery.validator.addMethod("mm", function(value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, "格式不对");
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,10}$/;
return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");
// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式错误");
// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");
注意：上面代码中--->配置错误提示的节点，默认为label，这里配置成 span （errorElement:'span'）
网上上找到的一些验证规则，仅供参考！
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "手机号码格式错误");
// QQ号码验证
jQuery.validator.addMethod("qq", function(value, element) {
var tel = /^[1-9]\d{4,10}$/;
return this.optional(element) || (tel.test(value));
}, "qq号码格式错误");
// IP地址验证
jQuery.validator.addMethod("ip", function(value, element) {
var ip = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
return this.optional(element) || (ip.test(value) && (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256));
}, "Ip地址格式错误");
// 字母和数字的验证
jQuery.validator.addMethod("chrnum", function(value, element) {
var chrnum = /^([a-zA-Z0-9]+)$/;
return this.optional(element) || (chrnum.test(value));
}, "只能输入数字和字母(字符A-Z, a-z, 0-9)");
// 中文的验证
jQuery.validator.addMethod("chinese", function(value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (chinese.test(value));
}, "只能输入中文");