背景: element-ui 中的el-form组件,自带了rules属性,可以配置组件检查,并且给出提示,还可以内用内置方法,在提交表单前进行一次验证,很是好用.
需求: 由于业务需要,我现在要做一个表单控件,需要它和element-ui提供的其他表单元素控件一样,可以使用rules来做检查,相信,这样的需求不仅仅是我有,很多使用这个element-ui库的小伙伴都有,那么,现在就来分析一下,如果来写一个可以检查的表单控件

[TOC]

1. 先来一个可以使用 v-model 绑定的控件

工欲善其事必先利其器,作为一个表单控件,v-model可以说是标配了,毕竟表单控件的主要用处还是接受用户输入,如果数据绑定很复杂,这个控件的可用性就大打折扣了,下面是一个基本的控件框架,大家也可以参考我的另一篇文章来写这个控件
参考:如何写一个双向绑定的vue控件

<template>
    <div>
        <!-- 模板省略 -->
    </div>
</template>
<script>
import baseCardMixin from './baseCardMixin';
export default {
    name: 'VModelDemo',
    props:{
        value:{
            type: Object,
            default: ()=>({})
        }
    },
    computed:{
        __value:{
            get(){
                return this.value;
            },
            set(nval){
                this.$emit('input',nval);
            }
        }
    }
};
</script>

<style lang="scss">
# 样式省略
</style>

我们知道v-model是一个语法糖,他由一个:value和一个@input合成,所以我们只要利用好这点,就可以让我们的组件可以使用这个语法糖.
大体上,思路就是通过计算属性的get和set方法,在模板中使用__value的值,它和value保持同步,当__value的值被修改时,会通过input事件来通知父组件.

2. 如何配合rules属性

rules是el-form的一个属性,用来做表单检查,可以自定义,也可以利用内置的简单规则,具体的API可以参考官方文档.
我们按照文档配置好rules之后,组件就会根据配置来触发检查,这里有几点小tips:

1. el-form上的:model决定了这个表单的检查的对象
2. el-form-item元素上的prop属性是必须的,它决定了这一个表单元素检查的是el-form上用:model绑定的那个对象的哪个属性.
3. rules对象的属性名字要和el-form-item上的prop一一对应
4. rules对象的属性名字可以是'abc.bcd'这种形式,它表示你要检查的是子对象的某个属性,对于这种不规范的属性名字,需要用引号包裹起来
5. 自定义的检查方法,如果写在data()里面,并且使用箭头函数,则在检查方法中可以使用this来获取组件中的值,如果检查方法是从外部引入的,可以再data()函数中,先bind(this)之后再使用,同样可以取到this的值

进入正题,我们自己写的组件可以利用这个rules来检查吗?
答案是必须可以啊,要不这个功能这多鸡肋.

要想使用这个rules做规则检查,有两种方式.

2.1 利用自带的表单组件

如果我们只是简单的包装几个表单组件,让它在内部处理一些逻辑,很好,这个组件天然的支持rules检查,我们在配置的时候,trigger的值选change或者blur就可以正常触发检查了
原因就在源码中,el-element的组件大多包含了一个emitter的mixin,通过查看el-input的源码,我发现,检查时通过下面这句代码来触发的:

if (this.validateEvent) {
    this.dispatch('ElFormItem', 'el.form.blur', [this.currentValue]);
}

这里的dispatch方法就是通过emitter引入的,它接受三个参数,第一个是组件名称,第二个是事件名,第三个是事件参数,它的作用方式是:

1. 向上递归查找 componentName 为 ElFormItem(第一个参数)的元素
2. 在找到的元素上通过$emit来触发 el.form.blur(第二个参数)的事件,并将[this.currentValue](第三个参数)作为事件参数

这里可以使用rules的关键在于dispatch这个方法是向上递归查找的,所以,这个组件无论被包装多少层,都可以找到ElFormItem这个祖先元素,并让这个祖先触发el.form.blur这个事件

2.2 自己手动来触发检查事件

有些时候,我们的组件里并不需要element-ui提供的表单控件,这时候,没有组件回去触发检查方法,这时候有两个对策:

1. 我们监听自己的数据变化,手动的通过el-form的validateField方法来触发检查
2. 我们在组件中简单的模拟一下dispatch方法

两中方法都是可以的,各有利弊:
第一种方法,思路简单,而且没有hack的成分在里面,比较好理解,但是这样使得组件API没有那么纯粹,使用者会不方便
第二种方法则相反,简单的hack,使得组件使用者不用考虑检查,就和普通的表单元素一样使用,但是组件代码产生了某种程度的偶尔

为了使用方便,本着不过度设计的原则,我选择了第二种方法,并且默认了组件的父级就是el-form-item组件,这样,我只要在父级来触发一个事件就可以了.
这样的假设不是为了偷懒,而是因为,业务组件已经经过了一次包装组合,不太可能再次被包装到另一个组件中作为接受数据的控件, 具体的代码如下

// 这里的`input`事件是为了处理`v-model`响应
this.$emit('input', checkedFiles);
// 兼容element-ui的检查事件,用简单的方式复刻了源码中的dispatch事件
// 参考 https://github.com/ElemeFE/element/blob/dev/packages/input/src/input.vue
// 参考 https://github.com/ElemeFE/element/blob/dev/src/mixins/emitter.js
if (this.$parent.$options.componentName === 'ElFormItem') {
    this.$parent.$emit('el.form.change', checkedFiles);
}

3. 后记

到此为止,我的需求算是解决了,rules的配置其实还有很多可以讲,但是,我现在并不是为了讲rules才写的这个文章,明白检查事件是如何触发才是我的目的.
还是那句话,一起学习,共同进步,会有错别字什么的,欢迎交流,不欢迎吵架,有话好好说

参考:
如何写一个双向绑定的vue控件
ElementUI官方文档
emitter源码
el-input源码