美文网首页VueJS
手写的vue表单校验

手写的vue表单校验

作者: 小强不是蟑螂啊 | 来源:发表于2018-09-05 19:31 被阅读721次
    16.png

    这是一个超多输入框的表单,很多,不只是上面一张图显示的那样,而且这些数据都是后台传过来的值,包括输入框的label,value,而且产品和ui不让用'*'去显示。那这样就不能用Element中的form表单验证了,只有自己写,不过反正也是后台返回的数据,分为几类,每个类都是一个数组。由于上面的条件,想到了解决思路:
    首先,遍历接口返回的大对象,每个对象下面都是一个数组,遍历数组,数组中的是输入框label,value等,我可以给每个输入框的对象添加一个error,并在模板遍历的时候添加,每次输入后,通过blur事件,将其用正则等校验,校验成功,error设置为空,不通过error为失败原因,最后提交的时候,只要校验所有的数据的error为空,就调用提交接口,否则,将error属性显示到模板

    17.png 18.png 19.png

    相关文章

      网友评论

      • yemoumou:返景入深林,复照青苔上。-简书朋友你好,我是币圈一老友,我的写作方向是区块链和数字货币,初到简书,望多多关照。互粉互赞,已赞,期待您的回赞哦。-淿

      本文标题:手写的vue表单校验

      本文链接:https://www.haomeiwen.com/subject/kfdzwftx.html