河伯特高

HerbertGao 个人主页

ElementUI Form校验时有值却报为空的问题

今天遇到了一个问题,在 ElementUI 里的一个 Form,对其中一个 Input 字段设置了校验 Required 之后,从空值输入一个值不会报错,而在已经有值去更新别的字段时,这个值会校验为空,记录一下问题原因。

这个字段是一个带小数的数字,但因为 ElementUI 的 Input 框不支持 :v-model.number 这一写法在末尾加小数点(Issues) ,只能把这个字段当成普通的 string 来处理。

然而这个问题报错的原因即是如此,新增时,字段以 string 类型更新到后台;更新时,后台返回前端时则是 int 类型,而这个字段恰好又校验了类型:{ type: 'string', required: true, message: '费率为必填项', trigger: ['blur', 'change'] } ,那么自然会出错。

经过尝试,有两种解决方式:

  1. 删去校验规则中的 type: 'string',此时无论是 int 还是 string 格式都可以被校验通过,但 按照async-validator 的文档 的说法,如果没有填写 type 的话,string 会是默认的格式,不知道是不是对此问题做过特殊处理;
  2. 在后台返回前台这个数字时,在数字后面增加 .toString() 将其转换成 string 格式,这样就避免了 int 类型的校验问题。

我这里选择了第二种解决方式,看起来更稳妥一些。

虽然这个问题不是很大,但仍花了我近一个小时来查找原因,在此记录一下,避免后续再踩坑。

欢迎关注我的其它发布渠道