记一次前端自动化表单验证处理方案

0、采用技术：

Vue.js Antd-vue

1、需求背景：

a. 后台对接时间紧迫，兄弟们都去忙着对数据，不能再回头一个个改控件，而且由于一开始没有使用FORM表单，导致验证方面如果从头补……卧槽，只能想办法统一处理，用最少的改动让兄弟们满意。

b. 开发表单验证方案的时间只给了1个小时，也就是午休时间，看着后台哥们期盼的眼神（如果不能实施，那要在拦截器甚至service里面做改动进行校验，虽然后台要做，但是前端能负担的空，不合法，格式不对等，其实还是能省不少事情的，而且大家都很累了），必须想办法弄出来。

2、实现方法：

不讲废话了，主要用到了几个玩意：自定义指令，若干vbind，mixins，store；

S1：设置个v-req指令（名字其实随意），操作NODE.DOM增加上样式，也就是红色小星星。

S2：设置vbind传入校验所需的参数，我设置的是type(类型，比如数字，字符串，电话，对象，数组等)，msg(出错时候的提示语)，model（需要校验的v-model），然后用v-model名作为ref的name（进行错误点位提示的DOM装载器）。

S3：在v-req内处理提供的校验参数，组装校验对象：

vp就是前面的type,msg,model等物，通过vnode.data.attrs获取， rule我这里做了个枚举，用来给后面的方法识别应该采用什么校验方法

{

        errStr: `${vp.msg}${errSuffix}`,

        keyName: vp.model,

        rule: rule,

        prop: 'req'

}

然后把这个对象push到store.state里，供mixins使用。

S4：mixins设置一个主动调用的函数，在数据提交阶段前调用，函数主要的工作为：获取STORE内储存的校验数据组 => 按照rule执行校验 => 发生错误则根据v-model名称去查找$refs对应的node进行视觉报错(我用的是animation和antd的notification进行处理视觉反馈) => 最终返回t/f

S5：根据最终校验结果的t/f来决定是否继续提交数据。

S6：记得在router.beforeEach清空store的校验组，否则会鸡飞狗跳。

S7：全部的精髓在于vue自身的特性配合，对了，灵活运用object[xxxx]哦，这个在根据字符串v-model映射真实v-model时非常有用。

finally：最终调用方法：<span ref="vmodel" v-req type="number" msg="数字表单" model="inputNumber">数字型：</span>，所有字段从配套的input里面都可以复制过来，无脑ctrl+c/v就行，后台兄弟一致好评。

----------------------PS----------------------

思路就是如上了，整体施工耗时30多min，还能睡个午觉，时间紧迫没法写DEMO了，有需要的跟帖一起探讨下有没有更好的方案；

下次还有更好玩的事情，论表单页如何根据一个标识切换到纯文字的详情页，也是迫于无奈的操作，目前测试反馈还不错，正在整理文档中。

特别感谢那些以年纪大为由将我拒之门外的HR和TL们（36岁吧，公司倒闭了没办法，我祝你们也有这一天，记住别来我们这里，我见一个PASS一个），没有你们，我也没法坐稳现在前端框架的岗，感谢李总敢在我身上赌一把，往后必全力以赴。