前段时间写过一篇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
