实例详解jQuery表单验证插件validate(jquery示例)

推荐整理分享实例详解jQuery表单验证插件validate(jquery示例)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery示例,jquery例子,jquery表达式,jquery操作表格,jquery表达式,jquery示例,jquery表达式,jquery100例,内容如对您有帮助，希望把文章链接给更多的朋友！

validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用，具体的我们一起来看看。

例子，html代码

messages_cn.js文件如下

关于validator插件详解

主要分几部分

jquery.validate 基本用法jquery.validate API说明jquery.validate 自定义jquery.validate 常见类型的验证代码

下载地址

jquery.validate插件的文档地址

必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期(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: 输入值不能小于

验证提示

下面是默认的验证提示，官网有简体中文版的验证提示下载，或者通过jQuery.extend(jQuery.validator.messages自定义错误提示信息，可以将网站的验证提示文本统一到一个文件里。

使用方式

1：

在控件中使用默认验证规则，例子：

电子邮件(必填)

2：

可以在控件中自定义验证规则，例子：

自定义(必填,[3,5])

3:

通过javascript自定义验证规则，下面的JS自定义了两个规则，password和confirm_password

required除了设置为true/false之外，还可以使用表达式或者函数，比如

Html

4：

使用meta自定义验证信息

首先用JS设置meta

Html

5:

使用meta可以将验证规则写在自定义的标签内，比如validate

JS设置meta

Html

Email

6:

自定义验证规则

对于复杂的验证，可以通过jQuery.validator.addMethod添加自定义的验证规则

官网提供的additional-methods.js里包含一些常用的验证方式，比如lettersonly，ziprange，nowhitespace等

例子

7:

radio、checkbox、select的验证方式类似

radio的验证

性别

checkbox的验证

最少选择两项

select的验证

下拉框

8:

Ajax验证

用remote可以进行Ajax验证

Plugin methods

Name Type

validate( options ) Returns: Validator

验证所选的FORM

valid( ) Returns: Boolean

检查是否验证通过

rules( ) Returns: Options

返回元素的验证规则

rules( "add", rules ) Returns: Options

增加验证规则

rules( "remove", rules ) Returns: Options

删除验证规则

removeAttrs( attributes ) Returns: Options

删除特殊属性并且返回他们

Custom selectorsName Type

:blank Returns: Array <Element >没有值的筛选器

:filled Returns: Array <Element >有值的筛选器

:unchecked Returns: Array <Element >没选择的元素的筛选器Utilities

Name Type

jQuery.format( template, argument , argumentN... ) Returns: String用参数代替模板中的 {n}。Validator

validate方法返回一个Validator对象, 它有很多方法， 让你能使用引发校验程序或者改变form的内容.

下面只是列出常用的.

form( ) Returns: Boolean验证form返回成功还是失败

element( element ) Returns: Boolean验证单个元素是成功还是失败

resetForm( ) Returns: undefined把前面验证的FORM恢复到验证前原来的状态

showErrors( errors ) Returns: undefined显示特定的错误信息built-in Validation methods

Name Type

setDefaults( defaults ) Returns: undefined改变默认的设置

addMethod( name, method, message ) Returns: undefined添加一个新的验证方法. 必须包括名字，一个JAVASCRIPT方法和一个默认的信息

addClassRules( name, rules ) Returns: undefined增加组合验证类型

addClassRules( rules ) Returns: undefined增加组合验证类型built-in Validation methods

Name Type

required( ) Returns: Boolean必填验证元素

required( dependency-expression ) Returns: Boolean必填元素依赖于表达式的结果.

required( dependency-callback ) Returns: Boolean必填元素依赖于回调函数的结果.

remote( url ) Returns: Boolean请求远程校验。url通常是一个远程调用方法

minlength( length ) Returns: Boolean设置最小长度

maxlength( length ) Returns: Boolean设置最大长度

rangelength( range ) Returns: Boolean设置一个长度范围[min,max]

min( value ) Returns: Boolean设置最小值.

max( value ) Returns: Boolean设置最大值.

range( range ) Returns: Boolean设置值的范围

email( ) Returns: Boolean验证电子邮箱格式

url( ) Returns: Boolean验证连接格式

date( ) Returns: Boolean验证日期格式(类似//的格式，不验证日期准确性只验证格式)

dateISO( ) Returns: Boolean研制ISO类型的日期格式

dateDE( ) Returns: Boolean验证德式的日期格式（.. or 1.1.）

number( ) Returns: Boolean验证十进制数字（包括小数的）

numberDE( ) Returns: BooleanMakes the element require a decimal number with german format.

digits( ) Returns: Boolean验证整数

creditcard( ) Returns: Boolean验证信用卡号

accept( extension ) Returns: Boolean验证相同后缀名的字符串

equalTo( other ) Returns: Boolean验证两个输入框的内容是否相同

自定义jquery-validate的验证行为

1: 自定义表单提交

设置submitHandler来自定义表单提交动作

如果需要提交表单，可以调用form.submit(); 或者$(form).ajaxSubmit();

2: 调试模式

将debug设置为true，表单不会提交，只进行检查，方便调试

3: 设置validate的默认值

使用setDefaults可以设置validate的默认值，比如默认所有表单验证都是在debug模式下进行

4: 某些元素不验证

设置ignore属性可以忽略某些元素不验证

5: 验证时机

jquery.validate可以很方便的设置在什么时候触发验证动作

onsubmit: 提交时是否验证

onfocusout: 失去焦点时验证(checkboxes/radio除外)

onkeyup: 在keyup时验证

onclick: 在checkboxes、radio点击时验证.

6: 重写验证规则和验证提示信息

7: focusInvalid 是否把焦点聚焦在最后一个动作或者最近的一次出错上

8: focusCleanup

如果该属性设置为True, 那么控件获得焦点时，移除出错的class定义，隐藏错误信息，避免和 focusInvalid.一起用。

9: meta

设置meta来封装验证规则

自定义错误消息的显示方式

默认情况下，验证提示信息用label元素来显示, 并且会添加css class, 通过css可以很方便设置出错控件以及错误信息的显示方式。

如果想自定义显示方式，可以修改jquery.validate的默认显示方式

默认用label显示错误消息，可以通过errorElement属性来修改errorElement: 错误消息的html标签

可以在出错信息外用其他的元素包装一层。wrapper: 错误消息的外层封装html标签

验证出错的css class默认是error，通过errorClass可以修改errorClass: 验证出错时使用的css class

还自定义验证成功时的动作success: 如果值是字符串，会当做一个css类，如果是一个函数，则执行该函数

或者

还可以把错误消息统一到一个容器显示errorLabelContainer: 将错误消息统一到一个容器显示

默认情况下，错误消息是放在验证元素后面的，可以自定义错误消息的显示位置

更进一步可以定义一个组，把几个地方的出错信息统一放在一个地方，用error Placement控制把出错信息放在哪里groups：定义一个组

高亮显示

highlight: 高亮显示，默认是添加errorClassunhighlight: 和highlight对应，反高亮显示

或者可以完全自定义错误显示showErrors: 得到错误的显示句柄

jquery.validate 自定义验证方法及validate相关参数 JqueryValidate相关参数//定义中文消息varcnmsg={required:必选字段,remote:请修正该字段,email:请输入正确格式的电子邮件,url:请输入合法的网址,date:请输入合法的

jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法 先给大家分享数据校验显示效果Web前端数据校验组件Web项目中客户端与服务端的交互离不开Form表单，Form表单中最常用的元素莫过于input标签，input标签

jQuery添加删除DOM元素方法详解 本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考，具体如下：介绍DOM是DocumentObjectModeule的缩写，一般来说，DOM操作分成3个方面。1、