大致介绍
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。
基本语法
Validate插件需要jQuery,所以我们需要在头部引入jQuery和Validate文件
他的提示信息是:
第二种方式:自己写提示信息
效果:
注意:
还有一种写验证的方式是在 class 中写,例如required:true,minlength:2}">
但是不推荐这种写法,因为不符合样式与结构分离的要求,并且还需要自己下载一个jquery.Metadata.js文件才能够这样写
表单提交问题
可以在表单提交之前执行我们自定义的代码,当我们的自定义代码执行完毕后再提交表单
可以设置validate的默认值
只验证不提交表单
错误提示信息设置
1、错误信息位置设置
errorPlacement方法是设置错误信息显示在哪,默认值是在验证元素的后面
errorClass 是设置错误信息的样式,后跟css类名
errorElement 是设置用什么标签包住错误信息,默认值是
errorLabelContainer 是设置将所有的错误信息包在一个地方
wrapper 是设置用什么标签再把上边的 errorELement 包起来
例如:
效果:
例如:
是将每个提示信息用标签包起来,给他们添加css名为 .commentError 的样式, 并把他们都包再一个class为 error 的div里,在用
效果:
2、错误信息样式设置
第二种方式就是自己定义样式(当然也可以修改自带的css文件)
例如添加这样的样式:
效果:
验证时的问题
1、验证的元素通过
验证的元素通过验证时如果要进行操作,可以使用 success ,他可以接受字符串或者是函数,当接受的是字符串的时候是添加样式
例如:
是在要验证的元素通过验证时,弹出1
例如:
success: "valid"
是将css样式名为 .valid 添加到元素上
2、验证方式
自定义校验
虽然Validation提供了许多验证的方式,但是有些情况还是不够用的,所以如果要添加自定义的校验方式可以使用 addMethod 方法,通常将自定义的方法
写在 additional-methods.js 中,然后要引入这个文件
写入
additional-methods.js 文件的内容
例如:
只要把这段代码写入 additional-methods.js 文件就可以使用了
例如:
效果:
radio 和 checkBox、select 的验证
checkBox的required表示必须选中,minlength表示必须选中的最小个数,maxlength表示必须选中的最大个数,rangelength[2,3]表示选中个数区间
select的required表示选中的value不能为空,minlength表示必须选中的最小个数,maxlength表示必须选中的最大个数,rangelength[2,3]表示选中个数区间