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

最新推荐文章于 2024-08-10 11:51:29 发布

原创

最新推荐文章于 2024-08-10 11:51:29 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了作者在学习Vuejs半年后，通过自定义指令来简化表单验证的过程。文章提到Vuejs受到Angularjs的影响引入了指令概念，并且分享了如何创建一个扩展方法$on以辅助编写验证代码。作者提供了验证失败和验证成功的场景示例。

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();