Vue之自定义指令进行表单验证。

Vuejs学了也有将近半年了，感觉没有实质上的进步。于是自己尝试些了一点儿东西。

Vuejs参照了Angularjs的设计思想，引入了指令的概念，于是，想当然的就会想到自定义一些好用的指令来减少平时繁琐的编码。

Vujes中自定义指令部分，鄙人不在此赘述，不懂的道友直接撸官方文档。

我首先定义了一个扩展方法$on，为了方便后面的代码的编写。

HTMLElement.prototype.$on=function(eventType,callback,flag){      flag=flag==undefined?false:flag;      this.addEventListener(eventType,callback,flag);      return this;    };

然后定义了一个进行验证的工具方法：

  function inputValid(dataValidRule,inputValue) {      //判断非空      function isEmpty(src) {        return src == "";      }      //判断是否是数字类型      function isNumber(src) {        return !isNaN(src * 1) && !isEmpty(src);      }      ///判断是否是时间类型      function isDate(src) {        return !isNaN(Date.parse(src)) && !isEmpty();      }      //比较法则      function Compare(rule, current, cmpTarget) {        var result = null;        switch (rule) {          case "eq":            result = current == cmpTarget;            break;          case "eqeqeq":            result = current === cmpTarget;            break;          case "lt":            result = current < cmpTarget;            break;          case "gt":            result = current > cmpTarget;            break;          case "lteq":            result = current <= cmpTarget;            break;          case "gteq":            result = current >= cmpTarget;            break;        }        return result && !isEmpty(current);      }      //被比较对象      var target = null;      //验证结果      var Valid=false;      //验证规则      var validRule = dataValidRule;      if (validRule == undefined) {        throw new Error("请定义验证法则!");      }      validRule = validRule.replace(/\s/g, '');      //eq,eqeqeq,lt,gt,lteq,gteq      var subRule = null;      //如果是compare,name请保持 data-valid-rule="compare | eq(src)"这样的形式,src是要比较目标的id      //eq,gt(>),lt(<),lteq(<=),gteq(>=),eqeqeq(===)      if (validRule.indexOf('compare') >= 0) {        var temp = validRule.split('|');        validRule = temp[0];        var tempSplit = temp[1].split('(');        subRule = tempSplit[0];        target = document.getElementById(tempSplit[1].replace(/\)/g, ''));      }      switch (validRule) {        case "required":          Valid = !isEmpty(inputValue);          break;        case "number":          Valid = isNumber(inputValue);          break;        case "date":          Valid = isDate(inputValue);          break;        case "compare":          Valid = Compare(subRule, inputValue, target.value);          break;        default:          if (validRule.charAt(0) === '/' && validRule.charAt(validRule.length - 1) === '/') {            validRule = validRule.substr(1, validRule.length - 2);            validRule = validRule.replace(/\s/g, '');            var regExp = new RegExp(validRule);            Valid = regExp.test(inputValue);          } else {            Valid = eval(validRule + "('" + inputValue.replace(/'/g, '') + "')");          }          break;      }      return Valid;    }

接下来就是自定义我们自己的验证指令了：

  Vue.directive('validInput', function(el, binding, VNode, oldNode) {      var dirtyFlag=false;      var validRule = el.getAttribute('data-valid-rule');      var output=binding.value;      el.value=output.value;      el.$on('input',function(e){          output.dirty=true;          output.value=this.value;          output.valid=inputValid(validRule,this.value);      });    });

我模拟了一下Angularjs的表单验证的思路，所以，在后面的Vue的实例的代码中，我的数据必须符合特定的要求。

var vm = new Vue({      el: "#root",      data: {        params: {          name: {            value: "",            dirty: false,            valid: false          },          email: {            value: "",            dirty: false,            valid: false          }        }      }    });

其中dirty表示用户是否已经输入过表单，valid表示是否通过验证。

接下来就是使用这个自定义指令的时候了：

  <input type="text" id="target"  value="1234" />    <!--定义的规则可以是required,number,date,还可以是正则表达式还有compare | eq(target)这样的形式(又包括gt,lt,lteq,gteq,eqeqeq)-->    <input type="text" v-valid-input="params.name" data-valid-rule="compare | eq(target)" />    <span class="error" :class="{'display-b':params.name.dirty&&!params.name.valid}">错误信息+{{params.name}}</span>    <input type="text" v-valid-input="params.email" data-valid-rule="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/" />    <span class="error" :class="{'display-b':params.email.dirty&&!params.email.valid}">错误信息+{{params.email}}</span>

目前相对来说还比较一般，如果日后项目中使用，还可以进一步优化。

验证失败的时候：

:

验证成功的时候: