概述

jQuery Validate插件为表单提供了强大的验证功能，使得客户端的表单验证变得更加容易，并提供了大量的定制选项来满足应用程序的各种需求。该插件捆绑了一组有用的身份验证方法，包括URL和电子邮件身份验证，并为编写用户定义的方法提供了一个API。默认情况下，所有绑定方法都使用英语作为错误消息，并且已经被翻译成37种其他语言。该插件由rn Zaefferer编写和维护，他是jQuery团队的成员，jQuery UI团队的主要开发者，也是QUnit的维护者。这个插件出现在2006年初的jQuery中，并且一直在更新。访问jQuery Validate官网，下载最新版本的jQuery Validate插件。

下载地址：http://xiaozai . JB 51 . net/201612/马援/jquery-validation-1 . 14 . 0 _ jb51.rar

基本语法

验证插件需要jQuery，所以我们需要在标题中引入jQuery和Validate文件

脚本类型=' text/JAVAScript ' src=' http : lib/jquery . js '/script script类型=' text/JAVAScript ' src=' http 3360 dist/jquery . validate . min . js '/导入脚本文件后，先编写一个简单的表单

form class=' cmx form ' id=' comment form '方法=' get' fieldset legend验证完整的表单/图例P标签是否为=' first name ' name/Labelinput id=' first name ' name=' first name ' type=' text '/P标签是否为=' lastname '姓氏/label input id=' last name ' type=' text '/P标签是否为=' username ' username/label input id=' username ' type=' username ' type=' text '/P标签是否为=' 标签输入id=' password ' name=' password ' type=' password '/P P标签为=' confirm _ password '验证密码/标签输入id=' confirm _ password ' name=' confirm _ password ' type=' password '/P P标签为=' email ' email/Labelinput id=' email ' name=' email ' type=' email '/P P标签为=' agreement '请同意我们的声明/label input type=' check box ' class=' check box ' id=' agree ' name=' agree '/P input class=' submit '

首先，我们需要知道哪种形式需要验证

$(function(){ $('#commentForm '))。validate()；});然后开始写验证规则。请注意，这里的选择元素是根据每个标签的名称属性选择的。基本语法如下

$ ('# commentform ')。validate({ rule s 3360 { first name 3360 ' required '，//required表示必填字段last name 3360 { required d 3360 true，min length 3360 3//最小长度为3 } })；从上面可以看出，如果一条消息只有一个验证要求，可以写成一行，比如名字；如果有多个验证需要以姓氏的形式书写；了解基本语法

查看验证提供的验证规则，

(1)required d : rue必填字段(2)，remote3360' remote-valid.jsp '使用ajax方法remote:'remote-valid.jsp验证输入值(3)，email:true必须以正确的格式输入电子邮件(4)，Url:true必须以正确的格式输入网站地址(5)，date:true必须以正确的格式输入日期，日期验证ie6错误，谨慎使用(6)，datetrue必须以正确的格式输入日期不验证有效性(7)，数字：必须输入合法数字(负数，十进制数)(8)，数字：必须输入整数(9)，信用卡：必须输入合法信用卡号(10)，等于：'#password '必须与#password (11)相同，接受：带有合法后缀名称的输入字符串(上传文件的后缀)(12)，最大长度：5输入字符串，最大长度为5(中文字符计为一个字符)(1) 10]输入长度必须在5到10之间(汉字算一个字符)(15)的字符串，range:[5，10]的输入值必须在5到10 (16)之间，max:5的输入值不能大于5(17)，min:10的输入值不能小于10。 我们将对上述表格进行如下验证和改进。

$(function(){ $('#commentForm '))。validate({ rule s : { first name : { required d : true，minlength: 5 }，lastname: 'required '，username : { required d : true，rangelength: [4，6])，password : { required d : true，minlength: 4，number: true }，confirm _ password 3: { required d 3: true});效果：

可以看到这里的提示默认是英文的不尽如人意，有两种方式可以将提示信息改为中文

第一种方式：介绍语言文件(推荐)

脚本类型=' text/JavaScript ' src=' http : list/localization/messages _ zh . js '/脚本

他的信息是：

Required:“这是必填字段”，remote:“请更正此字段”，email:“请输入有效的电子邮件地址”，url:“请输入有效的网址”，date:“请输入有效的日期”，DateISO:“请输入有效的日期(YYYY-MM-DD)”，number:“请输入有效的数字”，digits:“仅限数字”，creditcard:“请输入有效的信用卡号码”，email扩展名： '请输入有效的后缀'，maxlength: $。validator.format('最多可以输入{0}个字符')，minlength: $。validator.format('您必须至少输入{0}个字符')。范围长度：美元。验证器。format('请输入长度介于{0}和{1}之间的字符串)，$ .validator.format('请输入长度介于{0}和{1}之间的值)。Max: $.validator.format('请输入不大于{0} '的值)，min: $.validator.format('请输入不小于{0} '的值)第二种方法：自己写提示信息

$('#commentForm ')。validate({ rule s : { first name : { required d : true，minlength: 5 }，lastname: 'required '，username : { required d : true，rangelength: [4，6])，password : { required d : true，minlength: 4，number: true }，confirm _ password 3: { required d 3: truePassword : { required d : '请输入密码'，minlength: '密码长度不能少于5个字母' }，confirm _ Password : { required d : '请输入密码'，Minlength: '密码长度不能少于5个字母'，equalTo: '密码输入两次不一致' }，email: '请输入正确的邮箱'，} })；效果：

注意：写验证的另一种方法是在课堂上写，例如

输入id=' first name ' name=' first name ' type=' text ' class=' { required d : true，minlength:2} '

但是不建议这样写，因为不符合风格和结构分离的要求，需要下载一个jquery.metadata.js文件这样写

表单提交问题

我们可以在提交表单之前执行自定义代码，然后在执行自定义代码之后提交表单

$ ('# commentform ')。验证({ submit handler : function(){ alert('提交的事件成功'))；from . submit()；} });您可以设置验证的默认值

$.validate . setdefaults({ SubmIthandler : FuncTion(){ alert('提交成功！');form . submit()；} });仅验证，不提交表格

$(function(){ $('#commentForm '))。验证({ debug:true});});错误提示信息设置

1.错误消息位置设置

errorPlacement方法用于设置错误消息的显示位置，默认值位于验证元素之后

errorPlacement:函数(错误，元素){ error . appendo(element . parent())；}errorClass是设置错误信息的样式，后跟css类名

ErrorElement用于设置包装错误消息的标签，默认值为label

ErrorLabelContainer被设置为将所有错误消息打包在一个位置

包装器是设置使用什么标签，然后包装上面的errorELement

例如：

errorPlacement:函数(错误，元素){ $(元素)。最接近('形式')。find(' label[for=' element . attr(' id ')' ']')。追加(错误)；}，错误信息显示在已验证信息的前面

效果：

例如：

Errormelement :' span '，errorclass : ' commentererror '，error label container 3360 $(' formdiv。错误')，包装器：' Li '，它是用span标签包装每个提示信息。添加名为。对它们进行注释，用类错误将它们包装在一个div中，并用li包装每个提示信息

效果：

2.错误消息样式设置

有两种方法可以修改提示信息的样式

首先是使用下载Validation时附带的样式文件

link href=' demo/CSS/screen . CSS ' type=' text/CSS ' rel='样式表'/

第二种方法是定义自己的样式(当然，也可以修改自己的css文件)

例如，添加这样的样式：

input.error { border: 1px纯红；} label . error { background : URL(' demo/images/unchecked . gif ')no-repeat 0px 0px；左填充left: 16pxpadding-bottom : 2px；font-weight:粗体；color: # EA5200} label . checked { background : URL(' demo/images/checked . gif ')no-repeat 0px 0px；}效果：

验证中的问题

1.已验证的元素通过

如果您想在已验证的元素通过验证时进行操作，可以使用success，它可以接受字符串或函数，并在接受字符串时添加样式

例如：

success:函数(){ alert(1)；}，待验证元素通过验证时，弹出1

例如：

成功： '有效'

是添加名为。对元素有效

2.验证方法

自定义验证

虽然Validation提供了很多验证方法，但是有些情况是不够的，所以如果要添加自定义的验证方法，可以使用addMethod方法，通常是在additional-methods.js中编写自定义的方法，然后引入这个文件

脚本类型=' text/JavaScript ' src=' http : list/additional-methods . js '/脚本

编写附加方法. js文件的内容

例如：

$ . validator . addmethod(' iszipcode '，function(value，element){ var tel=/^[0-9]{6}$/；返回this . optional(element)| |(tel . test(value))；}、“请正确填写您的邮政编码”)；只需将这段代码写入附加方法. js文件，您就可以使用它了

例如：

zipcode : { required d : true，iszipcode : true}效果：

验证无线电，复选框和选择

对无线电的要求意味着必须选择一个

复选框的必选表示必须选择，最小长度表示必须选择的最小数字，最大长度表示必须选择的最大数字，范围长度[2，3]表示选择的数字间隔

Selected required表示所选值不能为空，minlength表示必须选择的最小数字，maxlength表示必须选择的最大数字，rangelength[2，3]表示所选数字间隔

总结：验证插件提供了很多验证，用户可以添加自己的验证样式和提示信息。但是，我在博客中没有提到任何与ajax相关的内容，因为ajax还没有学会-_-| |。如果有什么问题，请和我讨论。如有错误，请指正。

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！