1 表单验证的准备工作
在开启长篇大论之前，首先将表单验证的效果展示给大家。
显示帮助提示 2.鼠标离开表单项时，开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒
对于初学者而言，html表单验证是一项极其琐碎的事情。要做好表单验证，需要准备以下基本要素：
1.html表单结构：包含需要校验的表单元素；
2.js逻辑控制：在需要校验的表单元素上绑定事件，如点击、获取焦点、失去焦点等事件，并设置这些事件对应的执行函数；
3.css样式设置：针对需要校验的表单元素，需要设置默认的初始样式，以及触发元素绑定事件后的变化样式。
这3类基本要素中，html表单结构的创建相对简单。表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息。这里我参考了百度，163邮箱，京东等知名互联网企业的注册页面，归纳出表单验证需要的主要提示信息分类如下：
1.表单元素获取焦点后的
帮助信息
（插件中对应class名"tip"）；2.表单元素验证通过时的
成功信息
（插件中对应class名"valid"）；3.表单元素验证失败时的
错误信息
（插件中对应class名"error"）。如果不借助任何插件，我们需要花费大量的时间去编写不同类型的信息提示，考虑各种样式间的来回切换，以及编写一些基本的验证规则。名言曰："我之所以看得更远，是因为我站在巨人的肩膀上"。何不直接利用一些已有的成熟插件，来帮助我们快速的编写一个表单验证功能，这样既能提高效率，又能让我们抽出时间专注于我们自己的逻辑。
在众多表单验证插件中，jQuery validate插件是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证。它的特点如下：
1
.内置验证规则
：拥有必填、数字、email、url和信用卡号码等内置验证规则；2.
自定义验证规则
：可以很方便地自定义验证规则（通过$.validator.addMethod(name,method,message)实现）；3.
简单强大的验证信息提示
：默认了验证信息提示，并提供自定义覆盖默认信息提示的功能（通过设置插件中的message参数来实现）；4.
实时验证
：可以通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证。2 jquery validate插件实现表单验证的小例子
在引入jquery validate插件前，需要先引入它所依赖的文件jquery.js(例子中jquery的版本为1.9)；在实现的过程中，为了更好地效果，我在jquery.validate.extend.js文件中对jquery validate原有的功能进行了扩展，并修改了相关默认选项；因此在文档头部需要引入的文件有三个：
2.3 表单验证css样式
最后还要为页面元素添加css样式。插件中有一系列默认选项：其中默认错误显示标签为label，错误样式为label.error。上面在jquery.validate.extend.js文件中，有一个success函数需要说明一下。这个函数是在校验成功的时候执行的，我们在函数中为label提示标签添加了校验正确对应的样式label.valid。因此在css中如果要美化信息提示，需要对label相关样式如error,valid样式进行设计。此外我们在扩展插件功能中添加了一个class为tip的label标签，该标签仅在校验元素获得焦点时生成。为此，还需要设置label的tip样式。
3 表单验证效果演示
至此，表单校验的代码编写和插件的应用已经全部完成。在浏览器中运行代码，显示效果如下图：
基本上满足现在大多数网站表单验证的要求，如果需要增加验证规则，只需要在jquery.validate.extend.js中增加校验规则即可，例子如下：
return value && /^\d*.?\d{0,2}$/.test(value);
},"金额必须大于0且小数位数不超过2位"
);
以上所述是小编给大家介绍的jQuery Validate表单验证插件实现代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
