jquery.validate使用详解

推荐整理分享jquery.validate使用详解，希望有所帮助，仅作参考，欢迎阅读内容。

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

一、简单应用实例：

1.用class样式进行验证，用法简单，但不能自定义错误信息，只能修改jquery-1.4.1.min.js中的内置消息，也不支持高级验证规则。

当然，如果不希望使用onclick事件进行提交验证，也可以在页面加载时加上jQuery的监控，代码如下：

这时就不需要在提交按钮上加 onclick="checkInput();"这个事件了。

2.使用Json字符串验证，使用该规则验证，必须额外引入jquery.metadata.pack.js文件

修改上面的两个INPUT如下：

可以看到，我们已经可以自定义错误消息了。

另外必须在页面中加上以下代码：

二、验证规则的应用

1.使用class验证的规则：

在class中可以使用：required，email，number，url，date，dateISO，dateDE，digits，creditcard，phoneUS

可以增加属性：minlength，maxlength，min，max，accept，remote（注：请检查是否返回是bool还是xml），equalTo='#password'

没有找到使用办法的内置方法：required(dependency-expression)，required(dependency-callback)，range，rangelength

2.使用Json对象验证的规则：

在class中进行如下定义：class=“{validate:{required:true,minlength:6,messages:{required:'请输入密码',minlength:'密码太短啦至少6位'}}}”

我们仍可进行以下定义：number:true, email:true, url:true, date:true, dateISO:true, dateDE:true, digits:true, creditcard:true, phoneUS:true

min:3, max:, minlength:3, maxlength:，required: '#other:checked'【此处表达式函数为required(dependency-expression)】

相比使用class来说，我们已经可以使用range方法了，可定义为数字range:[3,]，字符串长度rangelength:[3,]，remote:url，accept:'.csv|.jpg|.doc|.docx', equalTo:'#Password'

没有找到使用方法的内置方法：required(dependency-callback)

三、高级验证方法

在前面说到的简单验证中，使用起来非常简单，有些傻瓜式的味道，但毕竟有些内置规则不能使用。但要想做到灵活运用，还是需要通过JS编码来完成。这样不但所有的内置规则可以使用，而且我们还可以自定义验证规则。以下实例我从易到难逐个列出：

1.编写JS的简单方法

仍以登录验证为例：

我们只需设置validate的参数即可。

2.equalTo的使用，一般在注册时会用到

3.required(dependency-callback)的使用，绿色字体。

4.自定义规则，使用addMethod方法，如下：

//方法接收三个参数(value,element,param)//value是元素的值,element是元素本身 param是参数,我们可以用addMethod来添加除built-in Validation methods之外的验证方法//比如有一个字段,只能输一个字母,范围是a-f,写法如下

这样我们就可以在rules中加上这个规则，如下

另外，经过试验，在Json方式中，我们可以使用af:['a','f']，这个验证可以起作用，在class方式中，在某个元素上增加af='af'，验证也可以起到作用。

5.ajax验证，使用remote

如果我们验证的方法是返回Boolean类型，这个方法是没有问题的。但很多时候我们可能返回的信息会更多，或者返回其它类型，这时我们可以重新定义一个新的remote方法，示例如下（返回一个Json对象）：

服务器端方法如下（MVC中）：

我们就可以使用jsonremote来取代remote方法了。当然，remote方法依然可以使用。

6.错误显示规则