本文的示例分享了jquery.validate表单验证的用法，供您参考。具体内容如下

1.表格验证的准备

在开始长篇演讲之前，先向大家展示一下形式验证的效果。

1.单击表单项目以显示帮助提示

2.当鼠标离开表单项时，检查元素。

3.鼠标离开后提示正确性和错误，鼠标移动进来时帮助提醒

对于初学者来说，html表单验证是一件小事。要做好表单验证，您需要准备以下基本元素：

1).html表单结构：包含需要验证的表单元素；

2).js逻辑控制：绑定事件，如点击、获得焦点、失去焦点等。对表单元素进行验证，并设置这些事件对应的执行函数；

3).css样式设置：对于需要验证的表单元素，需要设置默认的初始样式和触发元素绑定事件后改变的样式。

在这三个基本元素中，html表单结构的创建相对简单。表单验证的重点和难点是如何利用js及时有效地提醒用户表单操作的相关信息。这里我参考了百度、163邮箱、JD.COM等知名互联网公司的注册页面，将表单验证需要的主要提示信息汇总如下：

1).表单元素获得焦点后的帮助信息(插件中对应类名‘tip’)；

2).验证表单元素时的成功信息(插件中对应的类名“有效”)；

3).表单元素验证失败时的错误消息(插件中对应的类名为“error”)。

在没有任何插件的情况下，我们需要花费大量时间编写不同类型的信息提示，考虑在各种风格之间来回切换，并编写一些基本的验证规则。有句名言：‘我看得更远，因为我站在巨人的肩膀上’。为什么不直接用一些成熟的插件来帮助我们快速编写一个表单验证功能，这样不仅可以提高效率，还可以让我们花时间专注于自己的逻辑。

在众多表单验证插件中，jquery validate插件是最古老的jquery插件之一，已经被世界各地的不同项目所验证。其特点如下：

1.内置验证规则：有内置验证规则，如必填项、号码、邮箱、网址、信用卡号等；

2.用户定义的验证规则：您可以轻松地自定义验证规则(由$。validator.addmethod(名称、方法、消息))；

3.简单强大的验证信息提示：提供默认的验证信息提示，提供自定义覆盖默认信息提示的功能(通过在插件中设置消息参数)；

4.实时验证：验证可以通过按键或模糊事件来触发，而不仅仅是在提交表单时。

接下来，我们选择这个插件来实现一个简单而漂亮的表单验证示例。

2 jquery验证插件实现表单验证的一个小例子

在引入jquery validate插件之前，需要引入文件jquery.js(示例中jquery的版本为1.9)；在实现过程中，为了达到更好的效果，我在jquery.validate.extend.js文件中扩展了jquery validate的原有功能，并修改了相关的默认选项。因此，文档头中需要引入三个文件：

script src=' http : jquery . js '/script script src=' http : lib/jquery . validate . min . js '/script script src=' http 3360 lib/jquery . validate . extend . js '/script 2.1表单html

在表单验证的三个要素中，应该首先编写html表单结构代码。为了使表单结构简单明了，我们将表单的每个元素包装在一个div结构中：label标签用于标记元素的名称，然后是表单元素本身。

【注：1。使用标签标签的好处是提高鼠标用户的可用性。当单击标签元素中的文本时，浏览器会自动将焦点转向与标签相关的表单控件。2.应该为每个要验证的表单元素设置id和name属性，这样在使用插件时可以方便地将元素与验证规则和验证信息绑定在一起。】

表单实现代码如下：

formaction=' # '方法=' post ' id=' regform ' field set Legend jquery-验证表单验证/Legend Div class=' item ' Label for=' username ' class=' item-Label ' username 3360/Label输入类型=' text ' id=' username ' name=' username ' class=' item-text ' placeholder=' set user name ' autocomplete=' off ' tip='请输入用户名'/Div Div class=' item ' Label for=' password ' class=' item-Label ' password : 标签输入类型=' password ' id=' password ' name=' password ' class=' item-text '占位符=' set password' tip='长度为6-16个字符'/Div div class=' item '标签为=' password' class=' item-label '确认密码3360/标签输入类型=' password ' name=' password ' class=' item-text '占位符=' set确认密码'/Div class=' item '标签为=' AMT' class=' item-label '金额：/标签输入类型并且最多有两位小数'/div div class=' item '输入类型=' submit '值=' submit ' class=' item-submit '/div/field set/form 2.2表单验证js逻辑

然后我们用js验证表单元素。在验证之前，我扩展了jquery validate插件的功能，并覆盖了默认选项。默认情况下，jquery validate插件只提供正确和不正确验证的提示，缺少我们常用的帮助信息提示。为了解决这个问题，我仔细研究了插件的源代码，发现插件本身提供了两个函数：onfocusin(当check元素获得焦点时调用)和onfocusout(当check元素失去焦点时调用)。通过修改默认参数的这两个界面，我们可以在当事人用户点击或选择某个元素(即元素获得焦点)时提示帮助信息；当用户鼠标离开元素时(即元素失去焦点)，帮助信息将被移除。

此外，jquery validate默认提供表单元素输入的实时验证，因为我们只需要在输入时提示用户输入帮助信息，所以需要关闭输入的实时验证，所以我们在默认参数中设置onkeyup为null。

我将特定的扩展和改进的代码放入新添加的js脚本jquery.validate.extend.js中，代码如下：

/* * * * * Onkeyup3360 null，/*验证成功后添加执行函数-修改提示内容并为正确的提示信息添加新样式(默认有效)*/success 3360 function(label){/*默认正确的label样式有效，需要由validClass重置，否则此处添加的其他样式无法清除*/label . text(')}，/* check元素获得焦点后重写执行函数-add [1。光标移动到元素中时的帮助提示，2。突出显示check元素]两个功能点*/onfocusin :函数(元素){this。最后活动的=元素；/*1.帮助提示函数*/this . addwrapper(this . errors for(element))。hide()；var tip=$(元素)。attr(' tip ')；if(tip $(元素)。父项()。孩子们。提示’)。长度===0){ $(元素)。父项()。追加(' label class=' tip ' ' tip '/label ')；} /*2.突出显示检查元素*/$(元素)。addclass('高亮')；//如果启用了if(this . settings . focuscleanup){ if(this . settings . unhighlight){ this . settings . unhighlight . call(this，element，this.settings.errorClass，this . settings . valid class)；} this . hide THeres(this . error for(element))；}}，/*当check元素的焦点离开时重写执行函数-remove [1。添加帮助提示，2。突出显示check元素] */onfocusout:function(元素){/* 1。删除帮助提示*/$(元素)。父项()。孩子们。提示')./*2.检查要移除的元素高亮样式*/$(元素)。removeclass('高亮')；/*3.替换下面注明的原代码，只要光标离开元素*/this.element(元素)就会触发check函数；/*if(！this . checkable(element)(element . name in this . submit | |！this . optional(element)){ this . element(element)；}*/}});完善插件的功能后，现在是Play ——使用插件绑定检查规则，检查表单元素的信息。jquery validate插件提供了验证表单元素的validate方法。此方法的参数是一个包含键值对的对象。最常用的关键字是规则(为不同的元素定义检查规则)、消息(为不同的元素定义错误消息)和成功(验证正确的字符串或执行函数)。常见的检查规则有：必选、最小长度、最大长度、电子邮件(电子邮件、日期、范围长度、等于(要求一个元素等于另一个元素，如等于：'#password ')以下代码显示了如何将检查规则绑定到表单中的用户名和密码等字段：

脚本$(文档)。ready(function(){ $('#regForm '))。validate({ rule s : { username : { required d : true，minlength: 2 }，password 3: { required d : true，minlength: 6，maxlength: 16 }，repassword : { required d : true，equalTo: '#password' }，Amt: { required: true，amtcheck:)});/script2.3表单验证css样式

最后，给页面元素添加css样式。插件中有一系列默认选项：默认错误显示标签为label，错误样式为label.error在上面的jquery.validate.extend.js文件中，有一个需要说明的成功函数。这个函数在验证成功时执行，我们在函数的标签提示标签中添加与正确验证对应的style label.valid。因此，如果你想美化css中的信息提示，你需要设计标签相关的样式，如错误、有效的有效样式。此外，我们在扩展函数中添加了一个带有类提示的标签标签，该标签仅在验证元素获得焦点时生成。为此，还需要设置标签的提示样式。

完整样式文件的内容如下：

正文{ font-family:微软雅黑；font-size : 15px；} fieldset { width: 680px}图例{ margin-left : 8px；}.项目{ height: 56px线高： 36px；margin: 10px}.项目。项目标签{左侧浮动：宽度： 80px；text-align:右侧；}.项目-文本{左侧浮动：宽度： 244 px；height: 16pxpadding: 9px 25px 9px 5px左边距left: 10pxborder: 1px固体# ccc飞越：隐藏；}.项目-选择{左侧浮动：height: 34pxborder: 1px固体# ccc左边距left: 10pxfont-size : 14px；padding: 6px 0px}.项目-提交{ margin-left : 88px；} input . error { border : 1px solid # e 6594 E；} input . highlight { border : 1px solid # 7 Abd 54；}label.error，label.tip { float: leftheight: 32px线高： 32px；font-size : 14px；文本-左对齐：左边距left: 5px左填充left: 20px颜色：红色；background: url('error.png ')不重复左中；} label.tip { color: # aaabackground: url('tip.png ')不重复左中；} label . valid { background : URL(' valid . png ')无重复左中；宽度： 32px；}3表单验证效果演示

到目前为止，表单验证的代码编写和插件的应用都已经完成。在浏览器中运行代码，显示效果如下：

基本上符合大多数网站的表单验证要求。如果需要添加验证规则，只需要在jquery.validate.extend.js中添加验证规则即可，示例如下：

/* * * * *返回值0 DotPoS 0(DotPoS 0 value . substring(DotPoS 1)=2)；*//^d*.返回值？d{0，2}$/。测试(值)；}、“金额必须大于0，小数位数不能超过2位数”)；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。