1200字范文 > Jquery.Validation表单验证

Jquery.Validation表单验证

时间：2019-11-11 23:14:42

官方网站：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个字符!');});