element表单有值但验证仍显示为空_和el-tree连用赋值


问题

element 表单增加了rules规则,其中一个input输入框不能为空,input的值和el-tree关连

操作如下:

1.点击表单input

2出现弹出框,弹出框内有el-tree,点击el-tree的值A,

3.弹框自动关闭,A自动赋值到input中,

4.此时element的验证会显示input中并没有值,然而我们可以看到input中是有值A的。

5.二次点击input,选取el-tree的值,表单验证通过

原因

出现这个问题,是因为rules规则input上{trigger:blur}(失去焦点时验证表单内容)。点击input,出现弹出框,此时input失去焦点,并且input确实没有值,所以失去焦点会触发rules验证;当el-tree上的值赋值给input时,没有“失去焦点”操作,所以rules不会进行验证,而是维持上一次的验证结果,即提示用户没有输入值。

解决

解决方法一:点击input,给input赋值如”请输入xxx“,然后出现弹出框(弹框会遮挡住input内容,所以不影响页面展示)

解决方法二:rules中input的规则改为{trigger:change}(实际使用发现这个效果更好)


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM