移动端H5通用表单验证插件

将表单验证的通用部分提炼出来,做成一个简易插件,方便调用。

已将源码放到GitHub上,名字叫zValidate

手机可扫描下图查看示例,PC端可点击此处查看

移动端H5通用表单验证插件

一、原理

1)需要引入zepto.js库,便于DOM操作。

2)将验证规则作为控件的一个属性,写在控件的html中,有点MVVM模式的味道。

3)将控件包在form中,点击submit按钮,将有name或id的控件组成一个数组,分别验证对应的规则,最终执行自定义的submit方法。

4)默认写了一套错误样式zValidate.css,但其实可以不使用样式,例如弹框显示错误。可在errorPlacement中定义相应方法。

5)默认的验证方法有required、email、url、date等,可通过方法addMethod自定义扩展。

下图是一个普通的表单结构:

移动端H5通用表单验证插件

二、使用方法

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)选项配置

详细的选项配置可以参考此处说明。或参考下图:

移动端H5通用表单验证插件

三、内部分析

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表单中的标签,可以根据实际情况做调整,有些事件可能readonlydisabled的控件也需要提交上去。

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);
});
上一篇:博客搬到了http://xianglong.me


下一篇:hdu 1849 (尼姆博弈)