jquery的validation插件

yuddpky 贡献于2011-07-05

作者 管理员  创建于2010-03-30 14:02:00   修改者微软用户  修改于2011-05-04 01:54:00字数3710

文档摘要:作用jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。
关键词:

 1. 作用 jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。 2. HelloWorld 说明:需要JQuery版本:1.2.6+ 步骤: 1, 要导入相应的jQuery.js与jquery.validate.js文件 效果如下图: 3. 基础知识 3.1. 指定验证规则的方式 3.1.1. 把验证规则写到字段元素的class属性中 例: 名称 * 
密 * 
再次输入
生日  
E-mail *
PAR(zip) 说明: 1, 如果使用class="{key:value,…}"的方式,必须引入:jquery.metadata.js 2, 表单字段的name不能重复,否则所配置的验证不起作用。 3.1.2. 调用validate()方法时传递字段的验证规则 $(function() { $("#testForm").validate({ rules: { loginName:{ required: true, min: 2 } , password: { required: true }, password2: { equalTo: "input[name=password]" } } }); }); 3.2. 内置的验证规则 required:true 必填字段 remote:"check.php" 使用ajax方法调用check.php验证输入值 email:true 必须输入正确格式的电子邮件 url:true 必须输入正确格式的网址 date:true 必须输入正确格式的日期 dateISO:true 必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性 number:true 必须输入合法的数字(负数,小数) digits:true 必须输入整数 creditcard: 必须输入合法的信用卡号 equalTo:"#field" 输入值必须和$(“#field”)相同 accept: "gif|png|jpg" 输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开 maxlength:5 输入长度最多是5的字符串(汉字算一个字符) minlength:3 输入长度最小是3的字符串(汉字算一个字符) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) range:[5,10] 输入值必须介于 5 和 10 之间 max:5 输入值不能大于5 min:10 输入值不能小于10 说明: 1, remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。在访问指定的url时,会自动把当前字段的值做为参数(以字段name为key)传递过去。 2, 某些属性值中的引号不能省略,否则出错。如accept、equalTo等。 remote使用时遇到的问题:添加用户时需要验证用户名是否存在,当添加上一个用户后,在不离开该页面的情况下,再次添加该用户名的用户,validate不能提示该用户已存在,因为缓存的原因,jquery仍认为该用户名可用。解决方法是在页面中添加:$().ready(function(){ $.ajaxSetup ({ cache: false //关闭AJAX相应的缓存 }); // 关闭缓存功能 }); 添加 修改错误信息提示位置: 修改Jquery validate 的错误提示位置,把错误提示在input内,当获得鼠标焦点的时候清楚提示信息。     具体使用方法: var validator = $("#myContainerForm").validate({ focusCleanup:true,//clear the error message when the error element get focus again. onkeyup:false, errorPlacement: function(error, element) {  showErrorMesssgeDiv(error,element);    },   rules:{ name:{ required: true } }, messages: { name:{ required:populateErrorMessage($("#errorRequiredMessage").val(), $("#containerNameTitle").val()) } } }); 3.3. 自定义验证规则 除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为: jQuery.validator.addMethod("name",function,message) 其中: 1, name为验证规则的名称 2, function定义验证的规则。参数有?。返回值为?。 3, message是验证失败时的提示信息。 3.4. 指定错误提示内容 3.4.1. 更改默认的提示内容 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} 的值") }); 3.4.2. 个别表单改变提示内容(只对当前表单有效) 方法一: 方法二: $(function() { $("#testForm").validate({ messages:{ loginName: { required: "必选字段2" }, email: { required: '必选字段22', email: "请输入正确格式的电子邮件2" } } }); }); 3.5. 改变错误消息显示样式 指定label.error的样式就可以了,如下: 说明:label.error指class为error的label元素,如:

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享文档获得金币 ] 0 人已下载

下载文档