vue2.x 组件化与验证插件的编写

学习了一年多的 vue 感觉vue还真是个强大的组件化框架.作为一个前端开发工作者，在开当中预到不少问题。也看到不少开发者写的vue代码，每个人写的代码都有些不同。很多人对组件化理解得不是很深，写的代码很多重复的代码却没抽出来，做成一个独立的组件。我先说说我遇到的情况：

很多人做表单的时候，一个页面一个组件，下面写很多原生input。比如：

image.png

像这样一个页面很多人都会直接一个路原生表单走到黑，

    标题
    
       
        错误信息
 


    标题
    
       
        错误信息
 

    标题
    
       
        错误信息
 

然后表单就一直加在这个页面，这样一个页面不觉得有很多重用的地方法嘛，为什么不把一个表单儿独立成一个组件呢，这样可大地减少代码理，下面是我自己把一个input 封装成一个组件的代码，我觉得一个input一个组件会给我们带来很大的方便。比如验证写验证的候可以独立验证。像表单验证这种自定义很强的插件本来是要自己写是最好的。组件化表单我方便我们写这样的插件。当然这仅能代表我的写法，没什么特别的意思大家觉得好就点赞，觉得不好当我没说。也可以给一些意见我，当作交流。

好了下面直接复制出我自己独立成组件的代码：

  {{title}}
  
      
      
      
      {{err}}
  

验证码器代码：

export default function Validator(data,self,ref) {  
    this.data = data;//保存新建的规则，
    this.result=""
    this.self=self; 将页面的this传过来并保存
    this.ref=ref; //将表单的ref索引传过来
 
}
Validator.prototype = {
    constructor: Validator,
    single: function(valname, val) { //验证单个字段  查看表单组件的valtVal()方法
        let str = true;
        if (this.data[valname]['tirm']) {
            val = this.trim(val);
        }
        for (let i = 0; i < this.data[valname]['rule'].length; i++) {
            let msg = this.data[valname]['msg'][i];
            let rule = this.data[valname]['rule'][i];
            if (typeof rule == 'string') {
                if (this[rule](val)) {
                    str = true;
                } else {
                    str = msg;
                    break;
                }
            } else {
                if (this[rule[0]](rule, val)) {
                    str = true;
                } else {
                    str = msg;
                    break;
                }
            }
        }

        return str;
    },
    all: function(data) {
        return this.data[valname];
    },
    require: function(str) { //必须字段
        if (str) {
            return true;
        } else {
            return false;
        }
    },
    tel: function(str) { //国内固话验证
        var result = str.match(/^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$/);
        if (result == null) return false;
        return true;
    },
    tel400: function(str) {
        if (str.match(/^400\-[\d|\-]{7}[\d]{1}$/)) { //第一次匹配 400-（七个数字和-）（数字结尾）
            if (str.match(/[\-]/g) == "-,-") { //第二次匹配两个 -
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    },
    trim: function(str) { //去除前后空格
        return str.replace(/(^\s*)|(\s*$)/g, '');
    },
    between: function(arr, val) { //区间大小
        if (val.length >= arr[1] && val.length <= arr[2]) {
            return true;
        } else {
            return false;
        }
    },
    max:function(arr,val){
      if (val.length > arr[1]) {
          return false;
      } else {
          return true;
      }
    },
    max:function(arr,val){
      if (val.length 

页面调用代码：

导入你的验证器代码在你的入口文件：import Schema from './validator/index.js';
Window.Schema=Schema||{};注册全局

不懂的可以看我的源代码 https://github.com/itvwork/itvwork
按提示安装依赖 然后运行项目
访问9090端口点击登录，然后点店铺管理，点击右上角的店铺添加 就可以看到源码了

验证器放在 app/validator 目录下
子组件事input放在 app/commpents/input/input-text.vue中
调用子组件和验证器的案例在：app/view/store/add.vue中

本文写到这里，有什么建议和疑问可以发我邮箱[email protected]
这只是我自己总结出来的方法，当然大家有更好的方法也可以说，大家多交流，谢谢