element-ui校验实用技巧

一、表单是如何绑定rules

查看官网不难发现form和form-item都可以赋予rules属性，那这两种方式有什么区别？优先级如何？下面将结合示例和源码进行分析。

1-1、form和form-item两者绑定的rules的优先级

由上面实验代码可知，form-item绑定的rules优先级会更高，覆盖掉form绑定的rules.

1-2、form绑定的rules如何作用于form-item

官方文档上有这样一段话：

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

结合这句话，我们可以知道form-item是通过自身的prop来确定rules的，这就要求form-item的prop要和rules对象内的每个字段一一对应。
为什么要一一对应，form的rules是如何分发给form-item的，带着这样的疑问我开始了源码的阅读，终于在form-item中找到了答案，它里面有个getRules方法
这部分实现的前三行很容易读懂，先设置formRules的初始值为el-form的rules, 设置selfRules为el-form-item自己的rules，自己判断是否必填，转换为对应的格式 { required: !!this.required};
一鼓作气，我们再看看它使用到的getPropByPath方法；这也是校验中出现频率最高的一个公共方法。这里代码虽然不多，但也没必要一行行去读，只需要弄懂大致实现和最后返回值是啥就可以了，o、k、v不难推测对应的就是obj、key和value.下面用几行代码测试一下返回的到底是个啥。
结果显示，o就是传入参数obj内传入path的父级对象；k就是o中path的最后一层(即最后一个.后面的内容)，v就是o[key]
再回到上面的getRules方法

const prop = getPropByPath(formRules, this.prop || '');
formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];

我们可以看到，调用getPropByPath方法传入的是form的rules和form-item的prop，我们假设this.prop只有一层，那么prop对象就是这样的

{
	o: formRules,
  	k: this.prop,
  	v: formRules[this.prop]
}

这也解释了为什么form-item的prop要和form绑定的rules要一一对应了。

return [].concat(selfRules || formRules || []).concat(requiredRule);

接着看最后一行, 最终这个el-form-item的校验规则就是：
如果有自身规则就是自身规则+是否必填，
否则就是表单里的规则+是否必填。

二、validate方法

绑定完rules，接下来就是触发校验。触发表单校验的方式有两种，一种是对表单项的trigger，例如blur（失焦）、change（内容的改变）等等，这些是用户操作层面的，还有一种是直接手动调用校验方法的，例如获取到form的实例调用实例上的validate方法实现全部form-item的校验。

2-1、form的validate方法

validate方法主要做的是遍历form-item,然后调用每个form-item自己的validate方法

由源码可以看到，校验过程中，如果form没有绑定model对象，是无法往下走的。因为model对象里是整个表单的数据源；所有校验都是根据model对象里的内容变化进行的；由此我们需要注意，form-item内表单元素绑定的值要写在model内部，不然无法进行校验。

2-2、form-item的validate方法

校验的核心实现就在form-item里的validate方法里，整体实现总结成三点：

• 获取到校验规则并放入至descriptor对象中
• 使用async-validator提供的AsyncValidator构造函数，并传入装有rules的对象生成实例validator
• 获取当前form-item内表单绑定的值，并传入到实例validator的validate方法内
  大致思路就是把rules和绑定的value给async-validator,让它内部做校验，最后返回结果即可

三、实际开发校验小技巧

3-1、循环form-item校验写法

一层for循环就在prop里加上index；保证formModel拼接这个prop和表单内v-model绑定的值保持一致

二层for循环就加两个index，最终只要保证能通过model+prop找到绑定的值即可

3-2、跨组件表单校验

多层循环的动态form表单，如果只用一个formModel来装，数据嵌套会有很多层，不便于阅读和维护。对于这种场景，把单独一个表单封装成组件会是一个比较好的方案。

对于跨组件的表单校验，我采用的是ref的方式，在父组件内直接拿到子组件实例，调用其内部的校验方法。


注意：这里获取循环组件实例的时候，需要加一个index做标识，另外在获取实例的时候需要带上一个0的索引，因为打印单独一个实例的结果是这样的。

3-3、联动校验

联动校验顾名思义即校验字段需要满足自身校验规则外，还受字段间的相互影响。这里就以价格区间的填写举例；在填写价格区间时除了要满足字段得是数字类型外，还必须满足左边的数字大于右边。

大致实现思路就是在methods里写一个自定义的校验规则，然后绑定到rules中。

参考链接：
element表单校验的几种方式（精品）
element-ui表单源码解析之el-form-item