jQuery validate插件功能与用法详解(jquery validation)

推荐整理分享jQuery validate插件功能与用法详解(jquery validation)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery validate remote,jquery validate remote,jquery validation plugin,jquery validator,jquery-validation,jquery-validation,jquery-validate,jquery validation plugin,内容如对您有帮助，希望把文章链接给更多的朋友！

本文实例讲述了jQuery validate插件功能与用法。分享给大家供大家参考，具体如下：

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

1.jQuery validate插件提供了强大的验证功能，jQuery validate插件的官网是 validate.js文件之前一定要先导入jQuery.js文件

(2) jQuery validate插件提供了$(form).validate(options)方法，本插件自带必填的数字，文字等验证规则

其中form表示表单元素名称，options表示调用validate方法时的配置对象，所有配置信息和异常信息显示的规则都包含在对象options中。

2.对于使用jQuery validate的方法有很多种，这里详细介绍通过表单元素名称来验证表单规则的方法。

即一种与HTML元素无直接联系，而是通过name属性来关联字段和验证规则的验证写法，这种方法可以实现行为与结构的分离。

这对上诉的HTML文件，我们可以写成如下验证规则：

运行这段代码后，显示为

我们发现在自定义规则之后，表单自带了验证方法，下面我们来看validate对象中，具体属性的作用

（1）首先在rules属性中，我们根据表单的name，来确定各个表单元素的规则：

比如required:true

说明用户名这个表单元素，不能为空，

minlength:2，表示用户名至少为2位字符

maxlength:，表示用户名至多为位的字符

（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），例如：--，//。只验证格式，不验证有效性。 7 number:true 必须输入合法的数字（负数，小数）。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 equalTo:"#field" 输入值必须和 #field 相同。 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。 minlength: 输入长度最小是 的字符串（汉字算一个字符）。 rangelength:[5,] 输入长度必须介于 5 和 之间的字符串（汉字算一个字符）。 range:[5,] 输入值必须介于 5 和 之间。 max:5 输入值不能大于 5。 min: 输入值不能小于 。 这里对于各个校验元素就不一一分析

我们来分析来个有意思的校验元素

（1）equalTo

对于equalTo元素，使用方法为equalTo:"#filed"

在具体的使用时，只有当前的表单元素中的值与name为filed的表单元素的值相等时，返回true 不会报错，否则会报错，并显示错误提示信息，常见的应用是在注册界面验证两次输入密码是否一致，比如：

对于这个表单，有如下验证规则：

只有当name=confirm-password的表单元素，与name=password的表单元素值相等时，才不会报错，否则会显示错误提示信息。

（2）email校验元素，用于验证邮箱的格式

如果我们在上例中的表单验证信息中加入email:true那么会自动验证所输出的是否匹配邮箱格式，若不匹配则返回false并显示错误提示信息；

4.validate的其他方法

（1）用其他方法代替默认的submit方法

并且可以改变validate()对象的默认submit方法：

(2)debug:只验证不提交表单

如果debug:true，则表单只验证不会提交，

同样也可以改变validate()对象的默认submit方法

(3)更改错误信息的显示位置

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程序设计有所帮助。

jQuery Validate让普通按钮触发表单验证的方法 一般的表单校验都是直接注册在页面上的匿名函数，导致只能通过固定的提交方式触发表单校验，如果想自定义一个按钮触发表单校验如何实现呢？目

详解jQuery简单的表单应用 大致介绍接下来的这几个博客是对前面所学知识的一个简单的应用，来加深理解单行文本框只介绍一个简单的样式：获取和失去焦点改变样式基本结构

jquery UI Datepicker时间控件冲突问题解决 公司里的项目由于发展较快，很多东西都没有好好梳理一下，以至于有很多的潜在的问题。最近就遇到了一个比较坑的问题。datepicker有两个插件库中的d