jQuery validate插件功能与用法详解

前言:对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度!

1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是,官方网站上有详细的文档介绍了jQuery插件的使用方法。对于插件的使用

(1)首先下载jquery.validate.js插件

然后在HTML文件中插入

<script type="text/JavaScript" src="https://www.jb51.net/js/jquery-1.11.3.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/jquery.validate.js"></script> <script type="text/javascript" src="https://www.jb51.net/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> <fieldset> <legend>用户登录</legend> <p> <label for="username">用户名</label> <input type="text" /> </p> <p></p> <p> <label for="password">密&nbsp;码</label> <input type="password"/> </p> <p></p> <p> <label for="confirm-password">再输入</label> <input type="password"/> </p> <p></p> <label for="verify"></label> <input type="button" value="确定"/> </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()); } })

运行这段代码后,显示为

jQuery validate插件功能与用法详解

我们发现在自定义规则之后,表单自带了验证方法,下面我们来看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"

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

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