将表单验证的通用部分提炼出来,做成一个简易插件,方便调用。
已将源码放到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表单中的标签,可以根据实际情况做调整,有些事件可能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);
});

Last modification:February 11th, 2020 at 10:05 am