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

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

已将源码放到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);
});