jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
validate()方法中的可以设置的属性
rules规则
messages 自定义错误消息提示
submitHandler 表单提交(当表单验证全部通过时)
一 .默认校验规则
required : true 必需的 “必选字段” 必须输入
remote :{url:"",type:"",dataType:"",data:{}} 远程的实现异步验证",使用 ajax 方法调用 {} 验证输入值。默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项。
email :true 电子邮件
url : true 合法的网址
date : true 合法的日期
dateISO :true 合法的日期 (ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性
number : true 合法的数字
digits : true 输入整数
creditcard : true 合法的信用卡号
equalTo : “#field” “输入和#field相同的值”
accept : 拥有合法后缀名的字符串,
maxlength:5 长度最多是 5 的字符串(汉字算一个字符)
minlength :1 长度最少是 1的字符串(汉字算一个字符)
rangelength:[6,12] 长度介于 6 和 10 之间的字符串(汉字算一个字符)。
range:[5,10] 输入值必须介于 5 和 10 之间。
max:5 输入一个最大为5 的值
min :3 输入一个最小为3 的值
二 .自定义验证规则
jQuery.validator.addMethod(name,function(jQuery.validator.addMethod(name,function(){},message)){},message)
//添加一个自定义的邮箱格式验证
jQuery.validator.addMethod(
"isEmail",
function(value, element) {
var regex = /^\w+@\w+\.\w+/;
return (regex.test(value));
},
"请正确填写您的邮箱"
);
三 .表单提交的方法
submitHandler:function(){//表单提交
$.ajax({});//或使用form.submit();
}
四 .案例 :添加验证
1.引入js:jquery.validate.js
2.validate验证
1).必须有表单
2).必须有name属性,以name属性验证
3.选中表单 调用validate()方法
$("#xForm").validate({
rules:{},
messages:{},
submitHandler:function(){ $.ajax({});//或使用form.submit();}
})
$("#xForm").validate({//id为xForm的表单添加validate验证
rules:{
bookName:{
required:true,
remote:{
url:"<%=request.getContextPath() %>/bookServlet?method=checkName",
type:"post",
dataType:"json",
data:{bookName:
function (){
return $("#bookName").val();
}
}
}
},
email:{
required: true,
email: true,
}
},//rules 规则
messages:{
bookName:{
required:"书名不能为空",
remote:"书名已存在"
},
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
}
},//messages 自定义错误消息提示, 默认提示信息 英文
submitHandler:function(){//表单提交 当验证都通过时 表单提交
$.ajax({});//或使用form.submit();
}
});
修改错误消息的位置
errorPlacement: function(error, element) {
//error为生成的提示标签对象,element为被验证的标签对象
//如果元素为单选框
if ( element.is(":radio") ) {
//将error元素添加到 单选框的父节点的下一个的下一个,也就是空白的td
error.appendTo( element.next().next() );//
} else if ( element.is(":checkbox") ) {
error.appendTo ( element.next() );
} else {
error.appendTo( element.parent().next() );
}
}