表单验证工具
表单验证大约是每一个js coder面对最多的问题，只要涉及到数据提交就会碰到表单验证的工作。点击查看演示效果
表单验证的工作其实思路是非常简单的，就是获取表单内的数据，根据已有的规则判断数据是否合法，然后给出相应的提示。最直接的反应就是，根据id获取dom以及其value，通过if else条件语句判断，给出结果，OK就这么简单，收工。
问题解决了，大家各回各家当然接下来会碰到的就是无休无止的条件判断，以及页面上到处充斥的垃圾代码，这种情况是让有轻微代码洁癖的同学所无法接受的，所以就有了表单验证工具，通过简单的配置来实现代码的重用，同时也提高了开发效率。
但是接下来又碰到一个问题，前端的工作是在是太复杂多变了（当然这也是之所以前端工作吸引我们的地方），简简单单的工具是无法应付如此之复杂多变的情况的。是的，我们可以通过对格式或者编码进行强制要求来实现我们的目的，但是这明显是不可行的。
要解决这个问题有两个办法：
- 通过代码生成工具，写一个应用，根据要求生成个性化的代码，这样就可以解决各种各样复杂的情况（呃，这大约可以称作为器械流，思想不端正的同学面壁去）
- 一个强健的，又足够灵活的代码结构，通过配置来实现各种个性化的应用（技术流）
崇尚技术的我们必须得选择技术流XD。
首先看一下最可能碰到的几种情形：格式检查，比如最常见的电子邮件格式合法性；是否为空检查；检查是否存在。这几种应该是最常用的，当然应该还有重复密码匹配，长度等检查。
其实，看起来情况这么多，其实就两种情况，一种是本地的检查，一种是ajax的检查。本地的检查也就是在客户端，用javascript就能搞定，ajax的则需要与后台进行交互，需要等待返回值，然后再去检查，这个需要后台的配合。
这里使用正则表达式来检查本地数据是否合法，通过jsonp与后台交互，要求后台返回规定格式的数据，进行ajax的检查。
看一下用到的正则：
- {
- otypes : {
- onotEmpty : {regExp : /.+/, message : '请检查确认填写的项目不为空'},
- oemail : {regExp : /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/ ,message:'请检查电子邮件的格式'},
- ocellphone: {regExp: /\d{13}/, message: '请检查手机号码'},
- odate: {regExp: /^\d{4}-\d{1,2}-\d{1,2}$/, message: '请检查日期'}
- o}
- }
这里没有添加太多的类型，只添加了最常用的几个，大家可以根据自己的需要添加不同的检验类型，比如身份证号码等等。
当然现在这里只是采用了比较简单直接的测试方式。下面提供使用说明，进一步的代码设计和优化将在后续文章中提及。
- 你需要在dom加载完成或者文档的结尾部分调用validate.init()方法。你需要做的就是保证验证工具初始化的时候保证dom已经存在。
- 你只需要调用validate.init()方法即可。这个方法接受两个参数，第一个必选参数数组，包括要验证那些控件等等，第二个是可选参数，提交按钮的id。
- 第一个必选参数是数组类型的，数组元素是json对象，每个json对象包括：id，type两个属性，分别为要检查的控件的id和检查的类型。例如：{id: ‘username’, type: ’email’}
- type类型的结尾加?号表示当前类型可为空，比如type: ’email’表示当前控件内容应该是email而且不为空的email，如果是type: ’email?’那么就是可以为空的email，当内容为空或者为email的时候都合法。
- 除了这两个必须的属性，还有其他的可选属性，总共包括一下几个属性：id, type, errorMsg（自定义错误信息）, url（ajax请求，返回值应为json，包括status和msg两个属性）, valid（自定义检查方法，返回true或false）, trigger（自定义触发事件，当事件发生时触发validate.checkNode()方法）。
转载请注明原文出处《表单验证工具》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。