jquery validate表单验证插件的基本使用方法及功能拓展

　　在开启长篇大论之前，首先将表单验证的效果展示给大家。

　　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 validate插件前，需要引入它所依赖的文件jquery.js；在实现的过程中，为了更好地效果，我在jquery.validate.extend.js文件中对jquery validate原有的功能进行了扩展，并修改了相关默认选项；因此在文档头部需要引入的文件有三个：

<script src='/images/loading.gif' data-original="jquery.js"></script><script src='/images/loading.gif' data-original="lib/jquery.validate.min.js"></script><script src='/images/loading.gif' data-original="lib/jquery.validate.extend.js"></script>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：jquery validate表单验证插件的基本使用方法及功能拓展

关键词：jquery