看到标题的时候,估计会很惊讶,服务端验证那不是很方便么,自定义一个rules,杀杀水就达到目标了。
事实上,我是在做一件偷懒的事情,毕竟大家都知道表单验证很多时候为了方便和节约性能,都是客户端先检验,然后再服务端检验,这样用户体验也好,但是在后台的时候,如果你要写两遍,那花的精力就大了。特别是elementUI的rules,还得写自定义的validateFunc,于是我就想着前端不校验,后端校验,然后把error回显到指定的元素上。
比如如果只是弹个窗,提个示,那谁都可以实现了,但如果你不能为指定元素做错误提示,那么在表单过多的情况下,用户也会很苦恼。如果表单有几十个,怎么破?
翻了一下elementui的form和form-item的源码,发现可以额外传递error进去。用来提示该元素出错了。error是一个string,组件中会watch,然后给validateStatus赋值error,给validateMessage赋值error对应的string。
于是,在submit的时候,发现有error时,可以直接this.errors = res.data.error;这时候相应的元素就会飘红。除了没有focus到第一个标红的元素上,其他一切OK
---
如果用的是step 表单,那要注意,如果要去不同的step,需要先设置step ,然后 在 this.$nextTick()中进行赋值。否则,页面出来了。变量会提前赋值,渲染出来的表单元素无法将error赋值进去。被这个折腾了一晚上。
---
用这个的好处是,只有提示,不会象他原来的rules会阻止下一步的进行。现在就感觉轻松多了。
本来是准备切到andtv的,结果 发现elementUI的2.15,把andtv中的几个额外的组件也加全了。比如description-item和 骨架屏。。确实666
----
再忍忍,现在还得用VUE2.。。。