el-mement表单校验-校验失败时自动聚焦到失败的input框

 

思路：调用input的focus()事件，聚焦到失败的input框上，

问题：如何获取失败的input框，结合element的校验方法，查看可以提供入口的地方

 

调用this.$refs[formName].validate()时的具体操作：

 

 field信息：

 内部‘field’信息：

 验证失败的返回值invalidFields信息：

 

问题：如何根据校验失败的field定位到相应的input框？

返回的校验失败的对象信息，只包含了prop的名字和失败的提示信息，根据这两项无法获取到对应的input框（ps:此时不知道如何利用返回的invalidFields的信息跟组件进行绑定）

 

 第一次尝试

仿照form.validate()方法重写一个验证，获取所有的fields，同样是循环遍历调用field.validate()方法，在某个field验证失败时，自动聚焦到此input框上

 此时的field是el-form-item组件，只有一个child就是el-input,可以看到此child下包含focus方法

 

 弊端：field.$children[0]太过于局限，当此el-form-item中包含其他的组件时，索引为0的不一定是input框，如：

 

此时，field.$children[0]是一个el-button组件，此组件没有focus方法，会导致报错

 

最终解决办法

在之前的debug过程中可以看到element-ui自带的表单验证返回中包含一个invalidFields对象，此对象包含了验证失败的所有属性名，如下图所示：

 

通过遍历invalidFields的属性（ps:之后才知道for可以遍历一个对象的所有属性）,在对应的input框上添加ref属性，直接根据ref就可精确地获取到元素

 

 

注意：input的readonly和disabled属性

disabled和readonly：
共同点：

都设为true，则form属性将不能被编辑；

不同点：

disabled=true时，该表单项不能获取焦点，表单提交时此项不会提交；

readonly只针对input(text / password)和textarea表单项有效，设置为true时，依然可以获取焦点，提交时此项也会提交；

 

参考链接：

https://blog.csdn.net/m0_37972557/article/details/81357607