| 规则 | 描述 |
|---|---|
| required:true | 必须输入的字段。 |
| remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
| email:true | 必须输入正确格式的电子邮件。 |
| url:true | 必须输入正确格式的网址。 |
| date:true | 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 |
| dateISO:true | 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 |
| number:true | 必须输入合法的数字（负数，小数）。 |
| digits:true | 必须输入整数。 |
| creditcard:true | 必须输入合法的信用卡号。 |
| equalTo:"#field" | 输入值必须和 #field 相同。 |
| accept: | 输入拥有合法后缀名的字符串（上传文件的后缀）。 |
| maxlength:5 | 输入长度最多是 5 的字符串（汉字算一个字符）。 |
| minlength:10 | 输入长度最小是 10 的字符串（汉字算一个字符）。 |
| rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 |
| range:[5,10] | 输入值必须介于 5 和 10 之间。 |
| max:5 | 输入值不能大于 5。 |
| min:10 | 输入值不能小于 10。 |
推荐格式
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
topic: "请选择两个主题"
}
});用其他方式替代默认的 SUBMIT
$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("提交事件!");
form.submit();
}
});
}); $("#btnSubmit").click(function(){
if ($("#frmAddVisit").valid() == true) {
submitInfo();
}
}); $(".selector").validate({
submitHandler: function(form)
{
$(form).ajaxSubmit();
}
}) debug，只验证不提交表单
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});更改错误信息显示的位置
默认情况是：把错误信息放在验证的元素后面
| 参数 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| errorClass | String | 指定错误提示的 css 类名，可以自定义错误提示的样式。 | "error" |
| errorElement | String | 用什么标签标记错误，默认是 label，可以改成 em。 | "label" |
| errorContainer | Selector | 显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大。 | |
| errorLabelContainer | Selector | 把错误信息统一放在一个容器里面。 | |
| wrapper | String | 用什么标签再把上边的 errorELement 包起来。 |
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 提交时验证表单
var validator = $("#form1").validate({
errorPlacement: function(error, element) {
// Append error within linked label
$( element )
.closest( "form" )
.find( "label[for=‘" + element.attr( "id" ) + "‘]" )
.append( error );
},
errorElement: "span",
messages: {
user: {
required: " (必需字段)",
minlength: " (不能少于 3 个字母)"
},
password: {
required: " (必需字段)",
minlength: " (字母不能少于 5 个且不能大于 12 个)",
maxlength: " (字母不能少于 5 个且不能大于 12 个)"
}
}
});
$(".cancel").click(function() {
validator.resetForm();
});
});异步验证
remote:{
url: site_path + ‘/open/check?d=‘ + Math.random(), //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
companyname: function() {
return $("#companyname").val();
}
}
} @ResponseBody
@RequestMapping(value = "/open/check", method = RequestMethod.POST)
public boolean check(HttpServletRequest httpRequest) {
return false;
}服务端就直接返回boolean值，如果不通过则返回false，反之返回true
添加自定义校验
addMethod：name, method, message参数 name 是添加的方法的名字。
参数 method 是一个函数，接收三个参数 (value,element,param) 。
value 是元素的值，element 是元素本身，param 是参数。
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。
$.validator.addMethod("af",function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},"必须是一个字母,且a-f"); username:{
af:["a","f"]
}addMethod 的第一个参数，是添加的验证方法的名字，这时是 af。
addMethod 的第三个参数，是自定义的错误提示，这里的提示为:"必须是一个字母,且a-f"。
addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。
如果只有一个参数，直接写，比如 af:"a"，那么 a 就是这个唯一的参数，如果多个参数，则写在 [] 里，用逗号分开。
jQuery.validate 中文 API
| 名称 | 返回类型 | 描述 |
|---|---|---|
| validate(options) | Validator | 验证所选的 FORM。 |
| valid() | Boolean | 检查是否验证通过。 |
| rules() | Options | 返回元素的验证规则。 |
| rules("add",rules) | Options | 增加验证规则。 |
| rules("remove",rules) | Options | 删除验证规则。 |
| removeAttrs(attributes) | Options | 删除特殊属性并且返回它们。 |
##### Validator
| 名称 | 返回类型 | 描述 |
|---|---|---|
| form() | Boolean | 验证 form 返回成功还是失败。 |
| element(element) | Boolean | 验证单个元素是成功还是失败。 |
| resetForm() | undefined | 把前面验证的 FORM 恢复到验证前原来的状态。 |
| showErrors(errors) | undefined | 显示特定的错误信息。 |
| Validator 函数 | ||
| setDefaults(defaults) | undefined | 改变默认的设置。 |
| addMethod(name,method,message) | undefined | 添加一个新的验证方法。必须包括一个独一无二的名字，一个 javascript 的方法和一个默认的信息。 |
| addClassRules(name,rules) | undefined | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。 |
| addClassRules(rules) | undefined | 增加组合验证类型，在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。 |
验证的触发方式修改
onsubmit、onfocusout、onkeyup、onclick、focusInvalid默认的时候都是true，focusCleanup默认为false
$(".selector").validate({
onsubmit:false
})更多内容可以关注微信公众号，或者访问AppZone网站
