本文实例讲述了jQuery validate插件功能与用法。分享给大家供大家参考,具体如下:
前言:
对于表单内容格式的验证,原生JS的写法,较为繁琐,笔者曾在写一个注册界面的时候,验证邮箱格式,用户名格式,密码格式,多处使用了正则,并且错误提示信息也要用display:none/显示隐藏,在用过jQuery validate插件后,则大大加快了开发速度!1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是http://jqueryvalidation.org/,官方网站上有详细的文档介绍了jQuery插件的使用方法。对于插件的使用
插件
然后在HTML文件中插入
因为jQuery插件是基于jQuery库基础之上的,因此在导入jQuery validate.js文件之前一定要先导入jQuery.js文件
插件提供了$(form).validate(options)方法,本插件自带必填的数字,文字等验证规则
其中form表示表单元素名称,options表示调用validate方法时的配置对象,所有配置信息和异常信息显示的规则都包含在对象options中。
2.对于使用jQuery validate的方法有很多种,这里详细介绍通过表单元素名称来验证表单规则的方法。
即一种与HTML元素无直接联系,而是通过name属性来关联字段和验证规则的验证写法,这种方法可以实现行为与结构的分离。
这对上诉的HTML文件,我们可以写成如下验证规则:
我们发现在自定义规则之后,表单自带了验证方法,下面我们来看validate对象中,具体属性的作用
(1)首先在rules属性中,我们根据表单的name,来确定各个表单元素的规则:
比如required:true
说明用户名这个表单元素,不能为空,
minlength:2,表示用户名至少为2位字符
maxlength:10,表示用户名至多为10位的字符
(2)其次在messages属性中,定义了当表单中的信息与规则不符合情况下的,错误提示信息,
如果不修改,默认为英文提示。在这里我们修改了username表单元素的required:属性的错误信息
因为在报错的时候会提示,“用户名”
3.了解jQuery validate插件的两个基本属性rules和messages,
下面jQuery validate默认校验表单:
我们来分析来个有意思的校验元素
对于equalTo元素,使用方法为equalTo:"#filed" 在具体的使用时,只有当前的表单元素中的值与name为filed的表单元素的值相等时,返回true 不会报错,否则会报错,并显示错误提示信息,常见的应用是在注册界面验证两次输入密码是否一致,比如:
对于这个表单,有如下验证规则: 只有当name=confirm-password的表单元素,与name=password的表单元素值相等时,才不会报错,否则会显示错误提示信息。
如果我们在上例中的表单验证信息中加入email:true那么会自动验证所输出的是否匹配邮箱格式,若不匹配则返回false并显示错误提示信息; 4.validate的其他方法 并且可以改变validate()对象的默认submit方法: (2)debug:只验证不提交表单 如果debug:true,则表单只验证不会提交, 同样也可以改变validate()对象的默认submit方法
错误提示的 css 类名,可以自定义错误提示的样式。标签标记错误,默认是 label,可以改成 em。显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
errorContainer: "#messageBox1,#messageBox2"错误信息统一放在一个容器里面。标签再把上边的 errorELement 包起来。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》
希望本文所述对大家jQuery程序设计有所帮助。