jQuery验证插件validate使用详解(jquery的validate前端表单验证)

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

文章相关热门搜索词:jquery验证码插件,jquery validate自定义验证,jquery验证码插件,jqueryvalidate验证,jquery的validate前端表单验证,jquery表单验证插件,jquery表单验证插件,jquery检验,内容如对您有帮助，希望把文章链接给更多的朋友！

一、jQuery.validate简介

　　jQuery.validate.js插件用于对表单输入进行验证，其使用配置非常简单。支持多事件触发，自带多种验证规则，还支持自定义验证规则。

1、配置方法

　　 先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。

　　 注意Validate的导入要在jQuery库之后。代码如下：

　　然后只要定义验证规则和指定错误提示位置就可以了。

　　在$(document).ready()里加入验证规则与错误提示位置，代码如下：

JS代码：

HTML代码：

　　这样就完成了非常简单的表单验证功能，当表单填写不正确时Validate在<input>的兄弟<span>元素里显示错误提示。

2、name属性

　　说明：jQuery.validate.js插件与<input>的关联使用的是表单的name属性。只有存在name属性的<input>才能验证！

二、自定义错误提示位置

　　当我们想设置错误提示的显示位置怎么设置呢？

　　答案就是在errorPlacement参数里，你可以按照自己的需要自定义书写，用的是jQuery

三、自定义错误提示信息

　　例如当我们有多个require:true选项，我想根据不同的选项设置不同的提示怎么办呢？

　　答案就是在messages参数里。用层层嵌套的方式设置自己需要的提示信息。如果某个字段没有message信息，这时才调用默认的提示信息。

实际上，jQuery.Validate默认的错误提示是生成一个class=error的label，所以，如果想设置样式，最简单的方法就是针对这个label设置就OK了，当然默认的label是可以手动更改的。

四、ajax异步验证　　只需要用到remote即可，注意后台返回的JSON只能够是true或false。

　　以下给出一个综合示例，前台HTML代码

后台控制器代码:

最终效果如下图所示：