手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

ElementUI form服务端验证

首页 > Javascript >

看到标题的时候,估计会很惊讶,服务端验证那不是很方便么,自定义一个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.。。。
 



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):