实踩过elementUi中el-form 表单校验的坑

实踩过elementUi中el-form 表单校验的坑

-要实现表单的自动校验需要保证以下三点:

1. :model
2. :rules
3. 每一项都需要有prop
   注意点: 一定记得prop v-model rules 中的name一定是保持一致的,不然都会不生效或校验不成功! 如果prop和v-model中的name不同,校验的值会为空
   *** :prop动态生成的prop,自定义校验也不会生效***

坑点:
最近的一个项目中,dialog中嵌套的form表单,部分域是回显的值,但是出现了前面的注意点都没有问题的情况下,且值回显成功了,但是表单校验不通过的情况.就像是不认识里面的值一样

----------------------------咱就是说一整个懵逼无语住,废话少的说,最终的火眼金睛发现了问题所在-------------------------------------------------------------

经过我看代码看代码看代码…
原来:
我的rules里面写错了! 漏!!! 菜鸡无比尴尬

rules里面注意每一个需要校验的项都是一个数组对象,我是这样写的

rules:{
  xxx:[{required:true,message:'不能为空',trigger:['blur','change'],type:'number'}]
}

看到了吗?↑ 大漏特漏!!!
type:‘number’ 应该单独写一个对象里面啊~~~~~~~

好了,我的问题解决了-------------------------------------------------

然后我又又又发现了一个问题:LOOK ME ↓

问题描述:如果需要某个input输入只能是数字的话,不能直接使用v-model.number
如果你一开始输入的是数字的时候,才不能输入其他的
如果你一开始就输入的是字母,是可以成功输入的
so~ 咱还是老老实实的自己写个校验规则吧

------------------------------------------------------------------------------我已经是成熟的分界线了------------------------------------------------------------------

常见的校验规则: 我是干货搬运工!!!谢谢作者!!!
https://blog.csdn.net/weixin_46599926/article/details/122989222