实例详解jQuery表单验证插件validate

validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看。

例子,html代码

<!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="https://www.jb51.net/jquery.min.js"></script> </head> <body> <form onsubmit="return false;"> <input type="text" maxlength="20"> <input type="password"> <input type="password"> <button type="submit">确定</button> </form> </body> <!-------------------------------------------------------------------------> <script src="https://www.jb51.net/jquery.validate.min.js"></script> <script src="https://www.jb51.net/messages_cn.js"></script> <script type="text/javascript"> $(document).ready(function(){ //提交 $('#submit').click(function(){ var pay_password = $('#pay_password').val(); var password_Repeat = $('#password_Repeat').val(); var password_old = $('#password_old').val(); var data = { 'pay_password':pay_password, 'password_Repeat':password_Repeat, 'password_old':password_old }; console.info(data); var v = $('#form').validate({ rules : { pay_password : { required : true, minlength : 6, ismypassword : true }, password_Repeat : { required : true, minlength : 6, ismypassword : true }, password_old : { required : true, minlength : 6, } }, messages : { pay_password : { required : "请输入密码", minlength : "字符长度不能小于6个字符", ismypassword : "密码必须由数字、英文字母和特殊字符(!,.@#$%^&*?_~)组成" }, password_Repeat : { required : "请输入密码", minlength : "字符长度不能小于6个字符", ismypassword : "密码必须由数字、英文字母和特殊字符(!,.@#$%^&*?_~)组成" }, password_old : { required : "请输入密码", minlength : "字符长度不能小于6个字符", }, } }); if(pay_password != password_Repeat){ alert("密码不一致,请重新输入确认!");return false; } //--------------------------------- if(!v.form())return false; $.ajax({ url:'{:U("Merchant/ajax_pw")}', data: data, beforeSend:function(){ }, success:function(res){ if(res == 1){ alert("密码修改成功"); } if(res == 0){ alert("两次密码一样,未做修改"); } if(res != 0 && res != 1){ alert(res); } } }); //------------------------ }); }) </script> </html>

messages_cn.js文件如下

jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为{0} 的值"), min: jQuery.validator.format("请输入一个最小为{0} 的值") });

关于validator插件详解

主要分几部分

jquery.validate 基本用法
jquery.validate API说明
jquery.validate 自定义
jquery.validate 常见类型的验证代码

下载地址

jquery.validate插件的文档地址


jquery.validate插件的主页


jquery.validate插件主页上提供的demo


验证规则

下面是默认校验规则,也可以自定义规则

(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-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

验证提示

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwdjx.html