将表单验证的通用部分提炼出来，做成一个简易插件，方便调用。
已将源码放到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);
});