将表单验证的通用部分提炼出来，做成一个简易插件，方便调用。
已将源码放到GitHub上，名字叫zValidate。
手机可扫描下图查看示例，PC端可点击此处查看：
一、原理
1）需要引入zepto.js库，便于DOM操作。
2）将验证规则作为控件的一个属性，写在控件的html中，有点MVVM模式的味道。
3）将控件包在form中，点击submit按钮，将有name或id的控件组成一个数组，分别验证对应的规则，最终执行自定义的submit方法。
4）默认写了一套错误样式zValidate.css，但其实可以不使用样式，例如弹框显示错误。可在errorPlacement中定义相应方法。
5）默认的验证方法有required、email、url、date等，可通过方法addMethod自定义扩展。
下图是一个普通的表单结构：
二、使用方法
1）载入zValidate
引入CSS文件和zepto库文件，还有zValidate类文件，这里说明一下 zValidate.css仅仅是表单和控件的样式，完全可以自定义。
<!--zValidate.css可自定义--> <link rel="stylesheet" href="styles/zValidate.css" /> <script src="scripts/zepto/zepto.js"></script> <script src="scripts/zValidate.js"></script>
2）初始化一个zValidate
$('.validate').zValidate();
3）zValidate演示中的表单结构
控件是由fieldset包裹的，input输入框使用了form-control样式类，一个form表单在最外面，里面有个submit按钮。
这个结构只是参考，具体情况可自定义。
<form id="validate3" method="post"> <div class="form-horizontal"> <fieldset class="form-group"> <div class="controls"> <input class="form-control" type="text" name="xxx"/> </div> </fieldset> <fieldset> <button type="submit">提交</button> </fieldset> </div> </form>
4）选项配置
详细的选项配置可以参考此处说明。或参考下图：
三、内部分析
1）init
1. form表单中必须有submit提交按钮，在init方法中将定义form表单的提交事件。
2. 在form的提交事件中，先验证控件的规则。
3. 验证通过，才会执行自定义的submit方法。
4. return false是为了阻止页面刷新。
me.$currentForm.submit(function() { var result = me.check($elements); //检查规则 if (result !== false) { me.options.submit.call(me, me.$currentForm, result); //执行自定义事件 } return false; });
2）elements
获取当前form表单中的标签，可以根据实际情况做调整，有些事件可能readonly或disabled的控件也需要提交上去。
this.$currentForm .find("input, select, textarea") .not("[type=submit], [type=reset], image, [disabled], [readonly], button");
3）elementValue
1. 获取控件的值，控件可能是radio、checkbox或普通的输入框，提取方式不同，所以封装了一层。
2. 先通过checkable判断是checkbox 或者 radio，再通过checked方法获取单选框与多选框选中的值。
3. number类型的输入框要特殊处理。
4. 剩下的普通输入框或下拉框就直接用val()提取。
var type = $element[0].type; if(zValidate.checkable($element)) {//判断是check or radio return this.checked($element.attr("name"), $element[0].type.toLowerCase()); }else if(type === "number" && typeof $element[0].validity !== "undefined") { return $element[0].validity.badInput ? false : $element.val(); } var val = $element.val(); return val.replace(/\r/g, "");//将换行去除
4）deserializeValue
将值类型转换，"true" => true , "null" => null等。
规则内容被放置在控件的一个属性中，取出来的时候是一个字符串，而更多的时候需要特定的类型，例如Boolean、Number等。
/** * 将值类型转换 * "true" => true "false" => false "null" => null "42" => 42 * "42.5" => 42.5 "08" => "08" JSON => parse if valid String => self */ zValidate.deserializeValue = function(value) { try { return value ? value == "true" || (value == "false" ? false : value == "null" ? null : +value + "" == value ? +value : /^[\[\{]/.test(value) ? $.parseJSON(value) : value) : value; } catch (e) { return value; } };
5）check
1. 此控件的核心方法，规则的验证就是在这里操作。
2. 从上面elementValue方法中提取控件的值，
3. 将data-*开头的属性提取出来，再遍历这些属性，根据属性值找到相应的规则（规则内容需要deserializeValue序列化），最后调用规则方法。
4. 如果验证错误，就要提取错误信息，并展示出来，默认是高亮，但可以做成弹框等。
$.each($elements, function(index, input) { var $input = $(input); var name = $input.attr("name") || $input.attr("id"); if (isError || name == "") { return; } var datas = $input[0].dataset; //获取data-*开头的属性 var val = me.elementValue($input); //获取value params[name] = val; //设置要传递的值 $.each(datas, function(key, rule) { if (isError) return isError; rule = zValidate.deserializeValue($.trim(rule)); //格式化类型 if ($.inArray(key, me.rules) >= 0) { if (rule === false || rule === null || rule === undefined) return; var success = me.methods[key].call(me, val, $input, rule); if (!success) { isError = true; message = $input.data(key + "Message"); //错误提示 me.options.highlight.call(me, $input); //高亮 me.showLabel(name, $input, message); //显示错误信息 } } }); });
6）methods
默认给出的几个验证方法。规则大部分是用正则书写，也有简单的比较方式。正则如果不熟悉可以参考《正则表达式系列》。
required: function(value, $element, param) {//必填 return value.length > 0 || false; }, number: function(value, $element, param) {//合法的数字(负数，小数) return this.optional($element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value); },
7）addMethod
自定义验证规则，可以传入验证名和验证方法。验证方法可以传三个参数：
1. val：控件的值
2. $input：控件对象
3. rule：规则内容
使用方法可以参考下面的代码：
//自定义验证规则 validate.addMethod('mobile', function(val, $input, rule) { return ConstCommand.regex.mobile.test(val); });
本文转自 咖啡机（K.F.J） 博客园博客，原文链接： http://www.cnblogs.com/strick/p/6801453.html ，如需转载请自行联系原作者
