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

8 篇文章 0 订阅

唠唠嗑

vue + elementUI 开发有些日子了,经常在使用el-form 组件时,时不时的出现验证没生效,或者生效了在验证函数中 valueundefined,也细细的读了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 组件上的 modelrules 一个是整个表单的数据源,一个是验证规则源。默认通过 el-form-item 组件上的 prop 获取对应源上面的数据与规则进行验证,el-form-itemprop 属性传入的参数被共用了,所以你会发现 rulesmodel 上面的 property 默认是一样的。就像下面这个例子 都是使用的 nameage

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-itemrules 属性传入的,其次就是通过 el-formrules 属性 获取的 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-itemprop 属性没传参数 或者 el-formmodel 没传参数 都不会往下走,也就是即使进入验证规则中,value 值也是 undefined

上述使用中常见问题场景

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

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

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

结语

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

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

  • 16
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值