jQuery validate插件功能与用法详解
本文实例讲述了jQuery validate插件功能与用法。分享给大家供大家参考,具体如下:
前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度!
1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidation.org/,官方网站上有详细的文档介绍了jQuery插件的使用方法。对于插件的使用
(1)首先下载jquery.validate.js插件
然后在HTML文件中插入
<script type="text/JavaScript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/js1.js"></script>
因为jQuery插件是基于jQuery库基础之上的,因此在导入jQuery validate.js文件之前一定要先导入jQuery.js文件
(2) jQuery validate插件提供了$(form).validate(options)方法,本插件自带必填的数字,文字等验证规则
其中form表示表单元素名称,options表示调用validate方法时的配置对象,所有配置信息和异常信息显示的规则都包含在对象options中。
2.对于使用jQuery validate的方法有很多种,这里详细介绍通过表单元素名称来验证表单规则的方法。
即一种与HTML元素无直接联系,而是通过name属性来关联字段和验证规则的验证写法,这种方法可以实现行为与结构的分离。
<form id="form-sp"> <fieldset> <legend>用户登录</legend> <p> <label for="username">用户名</label> <input type="text" name="username" /> </p> <p class="tip"></p> <p> <label for="password">密 码</label> <input type="password" name="password"/> </p> <p class="tip"></p> <p> <label for="confirm-password">再输入</label> <input type="password" name="confirm-password"/> </p> <p class="tip"></p> <label for="verify"></label> <input type="button" value="确定" name="verify" id="btn-ver"/> </fieldset> </form>
这对上诉的HTML文件,我们可以写成如下验证规则:
$("#form-sp").validate({ rules:{ username:{ required:true, minlength:3 }, password:{ required:true, minlength:6 }, "confirm-password":{ required:true, equalTo:"#password" } }, messages:{ username:{ required:"请输入你的用户名", minlength:"至少输入三位的用户名" } }, errorPlacement:function(error,element){ error.appendTo(element.parent().next()); } })
运行这段代码后,显示为
我们发现在自定义规则之后,表单自带了验证方法,下面我们来看validate对象中,具体属性的作用
(1)首先在rules属性中,我们根据表单的name,来确定各个表单元素的规则:
比如required:true
说明用户名这个表单元素,不能为空,
minlength:2,表示用户名至少为2位字符
maxlength:10,表示用户名至多为10位的字符
(2)其次在messages属性中,定义了当表单中的信息与规则不符合情况下的,错误提示信息,
如果不修改,默认为英文提示。在这里我们修改了username表单元素的required:属性的错误信息
因为在报错的时候会提示,“至少输入三位用户名”
3.了解jQuery validate插件的两个基本属性rules和messages,
下面jQuery validate默认校验表单:
1 | required:true | 必须输入的字段。 |
2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
3 | email:true | 必须输入正确格式的电子邮件。 |
4 | url:true | 必须输入正确格式的网址。 |
5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 |
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。 |
这里对于各个校验元素就不一一分析
我们来分析来个有意思的校验元素
(1)equalTo
对于equalTo元素,使用方法为equalTo:"#filed"
在具体的使用时,只有当前的表单元素中的值与name为filed的表单元素的值相等时,返回true 不会报错,否则会报错,并显示错误提示信息,常见的应用是在注册界面验证两次输入密码是否一致,比如:
<p> <label for="password">密 码</label> <input type="password" name="password"/> </p> <p class="tip"></p> <p> <label for="confirm-password">再输入</label> <input type="password" name="confirm-password"/> </p>
对于这个表单,有如下验证规则:
rules:{ username:{ required:true, minlength:3 }, password:{ required:true, minlength:6 }, "confirm-password":{ required:true, equalTo:"#password" } },
只有当name=confirm-password的表单元素,与name=password的表单元素值相等时,才不会报错,否则会显示错误提示信息。
(2)email校验元素,用于验证邮箱的格式
如果我们在上例中的表单验证信息中加入email:true那么会自动验证所输出的是否匹配邮箱格式,若不匹配则返回false并显示错误提示信息;
4.validate的其他方法
(1)用其他方法代替默认的submit方法
submitHandler:function(form){ form.submit(); } submitHandler:function(form){ form.ajaxsubmit(); }
并且可以改变validate()对象的默认submit方法:
$.validate.setDefaults({ submitHander:function(form){ form.submit(); } })
(2)debug:只验证不提交表单
如果debug:true,则表单只验证不会提交,
同样也可以改变validate()对象的默认submit方法
$.validate.setDefaults({ debug:true; })
(3)更改错误信息的显示位置
errorPlacement:function(error,element){ //第一个参数为错误提示信息,第二个参数为HTML中的元素 error.appendTo(element.parent()) //这里也可以直接写成类名的形式或者id名的形式 //error.appendTo(".class")或者error.appendTo("#id"); }
errorClass | String | 指定错误提示的 css 类名,可以自定义错误提示的样式。 | "error" |
errorElement | String | 用什么标签标记错误,默认是 label,可以改成 em。 | "label" |
errorContainer | Selector | 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。 errorContainer: "#messageBox1, #messageBox2" | |
errorLabelContainer | Selector | 把错误信息统一放在一个容器里面。 | |
wrapper | String | 用什么标签再把上边的 errorELement 包起来。 |
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。