1.validate:(重点)基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。
1.1:Validate的作用：
内置验证规则:拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
自定义验证规则:可以很方便地自定义验证规则
简单强大的验证信息提示默认了验证信息提示，并提供自定义覆盖默认的提示信息的功能
实时验证:可能通过keyup或blur事件触发验证,而不仅仅在表单提交的时候证.
1.2:validate的默认校验规则
(1)、required:true 必需字段。
(2)、remote:“remote-valid.jsp” 使用ajax方法调用remote-valid.jsp验证输入值。
(3)、email:true 必须输入正确格式的电子邮件。
(4)、url:true 必须输入正确格式的网址。
(5)、date:true 必须输入正确格式的日期，日期校验ie6出错，慎用。
(6)、dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性。
(7)、number:true 必须输入合法的数字(负数，小数)。
(8)、digits:true 必须输入整数。
(9)、creditcard:true 必须输入合法的信用卡号。
(10)、equalTo:"#password" 输入值必须和#password相同。
(11)、accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
(12)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符)。
(13)、minlength:10 输入长度最小是10的字符串(汉字算一个字符)。
(14)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)。
(15)、range:[5,10] 输入值必须介于 5 和 10 之间。
(16)、max:5 输入值不能大于5。
(17)、min:10 输入值不能小于10。
1.4:可以给表单添加自定义验证规则
语法:jQuery.validator.addMethod("验证规则名",function(验证的值){
验证代码块;
return boolean类型的结果;
});1.5:validate的使用步骤:
- 第一步: 导入Jquery和validate的库文件
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="validate.min.js"></script>- 第二步:页面加载成功后!对表单进行验证!
$("表单选择器").validate({
rules:{
表单元素的name名:{校验器:"值",校验器:"值"},
表单元素的name名:{校验器:"值",校验器:"值"},
......
},
messages:{
表单元素的name名:{校验器:"提示信息",校验器:"提示信息"},
表单元素的name名:{校验器:"提示信息",校验器:"提示信息"},
......
}
});- 第三步:表单提交时触发校验
eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1.validate验证表单</title>
<!--导入jquery库文件-->
<script src="../js/jquery.min.js"></script>
<!--导入validate插件-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
//自定义手机号验证规则
jQuery.validator.addMethod("isPhone",function(phonevalue){
//声明手机号正则表达式
var reg=/^1[3-9]\d{9}$/;
var result=reg.test(phonevalue);
return result;
});
//表单验证
$("form").validate({
rules:{
uname:{required:true},
pwd:{required:true,digits:true,rangelength:[3,6]},
repwd:{required:true,equalTo:"#pwd"},
email:{required:true,email:true},
card:{required:true,creditcard:true},
phone:{required:true,isPhone:true}
},
messages:{
uname:{required:"用户名不能为空"},
pwd:{required:"密码不能为空",digits:"密码必须为整数",
rangelength:"密码长度必须为3到6位"},
repwd:{required:"确认密码不能为空",equalTo:"确认密码与原密码不一致"},
email:{required:"邮箱不能为空",email:"邮箱格式有误"},
card:{required:"信用卡不能为空",creditcard:"信用卡号有误"},
phone:{required:"手机不能为空",isPhone:"手机号格式有误"}
}
});
});
</script>
</head>
<body>
<form method="get" action="">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="uname" id="uname"/></td>
<td id="uname1"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd" id="pwd"/></td>
<td id="pwd1"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td id="repwd"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="email" name="email" id="email"/></td>
<td id="email1"></td>
</tr>
<tr>
<td>信用卡号:</td>
<td><input type="text" name="card" id="card"/></td>
<td id="card1"></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" name="phone" id="phone"/></td>
<td id="phone1"></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>表单验证的触发方式
一.onsubmit:
配置方式如下:
$(".selector").validate({undefined
onsubmit: false
})
默认值是true，表示点击submit提交按钮就会进行表单验证，所以最好不要将其修改为false。
二.onfocusout:
配置方式如下:
$(".selector").validate({undefined
onfocusout: false
})
默认值是true，表示当焦点离开当前表单元素就会对其进行验证。
三.onkeyup:
配置方式如下:
$(".selector").validate({undefined
onkeyup: false
})
默认值是true，表示当按键弹起时，就会对当前表单元素进行验证。
四.focusInvalid:
配置方式如下:
$(".selector").validate({undefined
focusInvalid: false
})
默认值是true，当验证无效时，焦点跳到第一个无效的表单元素。
五.focusCleanup:
配置方式如下:
$(".selector").validate({undefined
focusCleanup: true
})
默认值是false。如果为true，当表单得到焦点时，移除在该表单上的errorClass并隐藏所有错误消息。