官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
在线文档:/Plugins/Validation
在线 APIhttp://jquery.bassistance.de/api-browser/plugins.html
项目介绍:/project/validate
常用正则
function isDigit(s) { var patrn=/^\d+$/; if (!patrn.exec(s)) return false return true
}
(1)required:true 必输字段
(2)remote:"check.shtml" 使用ajax方法调用check.shtml验证输入值
(3)email:true 必须输入正确格式的电子邮件(只能验证格式,不保证有效性)
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(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
国际化,在页面中引入messages_zh.js即可,当然也可以添加需要的验证规则
DOM验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title></title><script src="jquery-validation-1.10.0/lib/jquery-1.7.2.js" type="text/javascript"></script><script src="jquery-validation-1.10.0/lib/jquery.form.js" type="text/javascript"></script><script src="jquery-validation-1.10.0/dist/jquery.validate.js" type="text/javascript"></script><script src="jquery-validation-1.10.0/localization/messages_zh.js" type="text/javascript"></script><script src="jquery-validation-1.10.0/lib/jquery.metadata.js" type="text/javascript"></script><script type="text/javascript">$(function () {$("#register").validate();});</script></head><body><form id="register" action=""><table><tr><td><label for="username">用户名:</label></td><td><input type="text" name="username" id="username" class="{required:true,minlength:5}"></td></tr><tr><td><label for="password">密码:</label></td><td><input type="password" name="password" id="password" class="{minlength:6}"></td></tr><tr><td><label for="repassword">密码确认:</label></td><td><input type="password" name="repassword" id="repassword" class="{required:true,equalTo:'#password'}" ></td></tr><tr><td><label for="_basketball">爱好:</label></td><td><label><input type="checkbox" value="basketball" name="hobby" id="_basketball">basketball</label><label><input type="checkbox" value="football" name="hobby" id="_football">football</label><label><input type="checkbox" value="skating" name="hobby" id="_skating">skating</label><label><input type="checkbox" value="dance" name="hobby" id="_dance">dance</label></td></tr><tr><td><label for="_boy">性别:</label></td><td><label><input type="radio" value="boy" name="sex" id="_boy">boy</label><label><input type="radio" value="girl" name="sex">girl</label></td></tr><tr><td><label for="birthday">出生日期:</label></td><td><input id="birthday" name="birthday" type="text" class="required date"></td></tr><tr><td><label for="email">邮箱:</label></td><td><input type="text" name="email" id="email" class="required email"></td></tr><tr><td><label for="address">住址:</label></td><td><input type="text" name="address" id="address" ></td></tr></table><input type="submit" value="submit"></form></body></html>
View Code
js验证
$(function () {$("#register").validate({errorLabelContainer: "#messageBox",//现在错误的容器wrapper: "li",//容器类型 rules: {username: {required: true,rangelength: [3, 8]},password: {required: true,minlength: 5},repassword: {required: true,minlength: 5,equalTo: "#password"}},messages: {username: {required: "真实姓名不能为空",rangelength: "长度应该在3-8之间,可以包含中文字符"},password: {required: "没有填写密码",minlength: jQuery.format("密码不能小于{0}个字符")},repassword: {required: "没有确认密码",minlength: "确认密码不能小于{0}个字符",equalTo: "两次输入密码不一致"}}});});
其他配置项
//errorLabelContainer: "#messageBox", //现在错误的容器//wrapper: "li", //容器类型// errorElement: "span"出错时生成的标签类型//debug:false, //调试模式取消submit的默认提交功能//errorClass: "error",//默认为错误的样式类为:error//validClass: "check",//验证成功后的样式,默认字符串valid//focusInvalid: true, //表单提交时,焦点会指向第一个没有通过验证的域//focusCleanup:true;//焦点指向错误域时,隐藏错误信息,不可与focusInvalid一起使用!//submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form//form.submit(); //}
异步验证:
$(function () {$("#register").validate({rules: {username: {required: true,rangelength: [3, 8]},password: {required: true,minlength: 5},repassword: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,remote: {url: "/remote.ashx",type: "post",dataType: "html",cache: false,data: {email: function () {return $("#email").val();}},dataFilter: function (data) {return data.toLowerCase() === "true";}}}},messages: {username: {required: "真实姓名不能为空",rangelength: "长度应该在3-8之间,可以包含中文字符"},password: {required: "没有填写密码",minlength: jQuery.format("密码不能小于{0}个字符")},repassword: {required: "没有确认密码",minlength: "确认密码不能小于{0}个字符",equalTo: "两次输入密码不一致"},email: {required: "邮箱不能为空",remote: jQuery.format("邮箱已经存在")}},debug: false,submitHandler: function (form) {alert("开始提交了");//$("#addForm").attr("action","${base}/console/queryHotel.shtml");form.submit();}});});
备注:只能返回真假值与dataType的类型,纠结了好久
自定义验证:
validate中自带的验证方法足以满足一般的要求,对于特别的要求可以使用addMethod(name,method,message)添加自定义的验证规则
$.validator.addMethod("phoneNo", function (value, element) {var length = value.length;var regex = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;return this.optional(element) || (length == 11 && regex.test(value));}, "手机号码格式错误"); $(function () {$("#register").validate({rules: {username: {required: true,rangelength: [3, 8]},password: {required: true,minlength: 5},repassword: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,remote: {url: "/remote.ashx",type: "post",dataType: "html",cache: false,data: {email: function () {return $("#email").val();}},dataFilter: function (data) {return data.toLowerCase() === "true";}}},phone: {required: true,phoneNo: true}},messages: {username: {required: "真实姓名不能为空",rangelength: "长度应该在3-8之间,可以包含中文字符"},password: {required: "没有填写密码",minlength: jQuery.format("密码不能小于{0}个字符")},repassword: {required: "没有确认密码",minlength: "确认密码不能小于{0}个字符",equalTo: "两次输入密码不一致"},email: {required: "邮箱不能为空",remote: jQuery.format("邮箱已经存在")},phone: {required: "手机号码是必须的额"}},debug: false,submitHandler: function (form) {alert("开始提交了");//$("#addForm").attr("action","${base}/console/queryHotel.shtml");form.submit();},errorPlacement: function(error, element) { //指定错误信息位置if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkboxvar eid = element.attr('name'); //获取元素的name属性error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面} else {error.insertAfter(element); }},});});
$(document).ready(function () {$.validator.addMethod('userName', function (v, e, p) {var reg = /^\w{4,20}$/;var flag = reg.test(v);if (flag) {return true;}$.validator.messages['userName'] = '邮箱格式输入不正确!';reg = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i;return reg.test(v);}, '用户名由字母,数字和下划线组合,长度4-20个字符!');$.validator.addMethod('password', function (v, e, p) {var reg = /^.{4,20}$/;return reg.test(v);}, '密码由字母,数字和特殊符号组合,长度4-20个字符!');$.validator.addMethod('validCode', function (v, e, p) {var reg = /^\w{5}$/;return reg.test(v);}, '验证码由数字和字母组合而成,长度5个字符!');$.validator.addMethod('createName', function (v, e, p) {var reg = /^\w{4,20}$/;return reg.test(v);}, '用户名由字母,数字和下划线组合,长度4-20个字符!');});
依赖验证:
这个等我用到了在记录吧…
API文档
国产:
jQuery formValidator: /wzmaodong/archive//10/15/2724005.html
扩展:
/s/blog_608475eb0100h3h2.html
问题:
在中按钮都会解析成submit所有都会触发验证,如果想让某个按钮不触发验证可以加上这个样式:class="cancel"
/Leo_wl/archive//07/01/1769158.html
MVC中Remote问题
/JeffreyZhao/archive//12/04/jquery-validate-remote-bug.html