vue实现类似element中表单的封装

前段时间写过一篇react对input表单验证的封装，实现的效果与ant design类似。
今天来模仿element ui实现vue中对表单验证的封装。
基于vue cli 创建一个简单地项目即可，element ui中使用的async-validator框架对表单进行的验证，我们同样使用这个框架。首先安装一下

npm install async-validator

启动项目，我在src的components下分别创建三个vue文件，分别用于创建form，form-item和input。
对于单个表单的验证放到form-item中进行，input中实现value的传递并且通知form-item进行验证。我在form实现一个对整个表单验证的方法，提交表单时使用，并且form中接收表单值和校验规则。下面代码实现：

src/components/exinput.vue(创建input组件)

<template>
    <input :type="type" :value="value" @input="handleInput"  />
</template>
<script>
export default {
    props:{
        value: {
            type: String,
            default: ""
        },
        type: {
            type: String,
            default: "text"
        }
    },
    methods: {
        handleInput(e){ 
            this.$emit("input", e.target.value);//input在这是写死的，这样父组件可直接@input
            this.$parent.$emit("validate");//当值改变时，通知父组件校验
        }
    }
}
</script>

src/components/exformitem.vue(创建form-item组件)

<template>
    <div>
        <label v-if="label">{{label}}</label>
        <slot></slot>//slot占位，一会放入input组件
        <p v-if="error" style="color:red">{{error}}</p>
    </div>
</template>
<script>
import Schema from "async-validator"
export default {
    inject:["form"],//接收form组件传递过来值
    props: {
        label: {
            type: String,
            default: ""
        },
        prop: { //用户取的单个表单名，比如：uname,password等，与model和rules中的键一致。
            type: String
        }
    },
    data(){
        return {
            error: ""//存放验证失败时的信息
        }
    },
    mounted(){
        this.$on("validate",this.validate)
    },
    methods:{
        validate(){
            //使用async-validator验证时，校验规则和校验的值以键值对方式传入
            const val = this.form.model[this.prop];//获取当前校验的input值
            const rule = this.form.rules[this.prop];//获取当前input的校验规则
            const descriptor = {[this.prop]:rule};
            const schema = new Schema(descriptor);
            const source = {[this.prop]: val};
            schema.validate(source, error=>{
                if(error) {
                    this.error = error[0].message;//如果有错误，将错误信息赋给error
                    this.form.rules[this.prop].error = true;//如果有错误我给当前的校验规则中添加一个error属性赋值为true，主要是方便提交时校验
                }else{
                    this.error = "";
                    this.form.rules[this.prop].error = false;
                }
            })
        }
    }
}
</script>

src/components/exinput.vue(创建form组件)

<template>
    <form>
        <slot></slot>//一会放入form-item组件
    </form>
</template>
<script>
export default {
    provide(){//写法上和data一样，组件传值
        return {
            form: this
        }
    },
    props: {
        model: {
            type: Object
        },
        rules: {
            type: Object
        }
    },
    methods:{
        validate(cb){//表单提交时调用的方法，传入一个回调函数
            var ispass = Object.keys(this.model).every(item => {
                return this.model[item] && !this.rules.error
            })
            cb(ispass);//将校验结果传递出去
        }
    }
}
</script>

上面的组件中用到了provide/inject,这两个是成对出现的provide用于向下传值,inject用于接收值。可隔代传值。与react中的上下文有点类似。
接下来我们删除App.vue中的内容，将我们创建好的三个组件导入进去

App.vue

<template>
  <div id="app">
      <ex-form :rules="rulesform" :model="modelform" ref="loginForm">
        <ex-form-item label="用户名" prop="uname">
          <ex-input v-model="modelform.uname"></ex-input>
        </ex-form-item>
        <ex-form-item label="密码" prop="password">
          <ex-input type="password" v-model="modelform.password"></ex-input>
        </ex-form-item>
        <ex-form-item>
          <button type="button"  @click="submitForm('loginForm')" >提交</button>
        </ex-form-item>
       </ex-form>
  </div>
</template>

<script>
import ExInput from './components/exinput'
import ExFormItem from './components/exformitem'
import ExForm from './components/exform'

export default {
  components: {
    ExInput,
    ExFormItem,
    ExForm
  },
  data(){
    return {
      modelform:{
        uname:"",
        password:""
      },
      rulesform:{
        uname:[{required: true, message: "用户名不能为空"}],
        password:[{required: true, message: "密码不能为空"}]
      }
    }
  },
  methods:{
    submitForm(form){
      this.$refs[form].validate(vate => {
        if(vate){
          console.log("提交成功")
        }else{
          console.log("提交失败")
        }
      });
    }
  }
}
</script>

prop中传递的值是modelform和rulesform的键，所以在exformitem.vue文件中才能通过this.form.model[this.prop]/this.form.rules[this.prop]获取到对应的值。
查看页面

1.gif