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

555 阅读1分钟

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

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

image.png

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

image.png

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

image.png

image.png

---未完待续