输入和提交的表单验证优化

经常使用elemetui的组件和表单验证,官方给出的东西确实好用,但是每个属性都要写一个单独的校正挺麻烦的,对于同一类的输入验证,写那么多就没必要,代码也很冗余。并且表单校正并不是适用于提示文字在输入框的情况,校正情况的页面表现也没那么好

我想要这样的效果
(提示信息在输入框里,输入错误输入框变红)
image.png

image.png

一开始是直接在elemetui的基础修改的,通过callback,placeHolder,border,效果是实现了,弊端是不够优雅,冗余,代码量大 并且不适合必动态的表格输入框。

image.png

然后我放弃了el-form的表单校正,直接监听输入值
js提供的set 他提供的has,add,delete 直接简单方便,输入的值不同 做到一一对应
image.png

image.png

image.png

—未完待续

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享