elementUI el-form 组件 验证 提示不能为空，以及验证不生效的详细原因

唠唠嗑

用vue + elementUI 开发有些日子了，经常在使用el-form 组件时，时不时的出现验证没生效，或者生效了在验证函数中 value 是 undefined，也细细的读了elementUI 的文档。有些信息交代的比较模糊，最后还是看了elementUI 的源码才确认下来之前一直猜测的东西。

今天就专门分享一下，看el-from 这个组件验证相关的源码所了解到的东西。

如何进行验证的

如果要使用el-from 组件的验证，必不可少的三样是

1.el-form 组件上的 model 属性，这里很容易错误的写成 data

2.el-form 组件上的 rules 属性 或者 el-form-item 组件上的 rules 属性

3.el-form-item 组件上的 prop 属性

其实还有一点需要注意，验证的字段，必须在数据源中初始化。比如验证 name 字段，el-form 写的是 model="formData"的情况，如下：

export default {
	data() {
		formData: {
			name: '', // name 必须在此初始化，不初始化vue无法监听变更
		}
	}
}

el-form 组件上的 model 和 rules 一个是整个表单的数据源，一个是验证规则源。默认通过 el-form-item 组件上的 prop 获取对应源上面的数据与规则进行验证，el-form-item 的 prop 属性传入的参数被共用了，所以你会发现 rules 和 model 上面的 property 默认是一样的。就像下面这个例子 都是使用的 name 和 age。

export default {
	data() {
		formData: {
			name: '',
			age: '',
		},
		rules: {
			name: [{ required: true, message: '请输入名字'}],
			age: [{ required: true, message: '请输入年龄'}],
		}
	}
}

也可以看 elementUI 表单验证的demo，详细看看属性对应情况。

当要进行复杂的验证，比如数组的时候， 我们通过 el-form-item 以 :prop="'domains.' + index + '.value'" 这种格式（数据路径）传进去。

elementUI 有一个 公共的方法 getPropByPath, 循环遍历出 model 这个数据源中 对应的数组内的数据。
比如上方这个格式的例子，先从model中找domains这个数组，再找 index 也就是数组中第几个数据，再找这个数据的 vlaue 属性
即使是二维数组也会一层一层找下去，只要 prop 传递的参数正确，都能找对对应的值

使用这种方式就打破了原来 数据源 和 验证规则源 property 相同的规则，于是就只能通过 el-form-item 这个组件的 rules 属性，单独给这个组件传入 验证规则，也就是 elementUI 动态增减表单项 demo 处写的。

获取验证规则 源码处写法

 getRules() {
   let formRules = this.form.rules;
   const selfRules = this.rules;
   const requiredRule = this.required !== undefined ? { required: !!this.required } : [];

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

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

从获取验证规则最后一句就可以看出，默认最优先取 selfRules 也就是通过 el-form-item 的 rules 属性传入的，其次就是通过 el-form 的 rules 属性 获取的 formRules。

获取需验证的值 源码处写法

 fieldValue() {
   const model = this.form.model;
   if (!model || !this.prop) { return; }

   let path = this.prop;
   if (path.indexOf(':') !== -1) {
     path = path.replace(/:/, '.');
   }

   return getPropByPath(model, path, true).v;
 },

这里可以看到 el-form-item 的 prop 属性没传参数 或者 el-form 的 model 没传参数 都不会往下走，也就是即使进入验证规则中，value 值也是 undefined。

上述使用中常见问题场景

1 验证函数没进入，或者验证都不出现
这种情况 el-form 上的 rules 忘记写了，或者 el-form-item 上的 prop 的值并不存在与 验证规则源中，或者使用类似动态增删的方式，未单独给el-form-item 的 rules 属性添加验证规则

2 验证函数进入，value 是 undefined
这种情况 一般是 el-form 上的 model 没写 或者写错，或者是 el-form-item 通过 prop 传入的 property 在 model 传入的数据源 中 找不到对应的参数，对照修改一下就行。

整体来看，el-form 这个组件的验证其实还是写得还是很通俗易懂的，主要的验证处理都在 el-form-item 这个组件上了，el-form 也只承担了公共的数据源存储，以及公共方法的调用。

结语

好了，加班时间算是打发过去了，该下班了 ^ _ ^。

以上信息如有错误或疏漏，欢迎指正哈，谢谢。