在做公安局疫情上报系统的时候,由于前台的表单项目比较多,而且需要根据不同的条件进行显示切换,开始运行是表单校验很好用,随着项目不断更新,忽然有一天发现校验不起作用了。
经过几次调试,发现一个规律,就只有2项是不好用的,而且就是2,3项目不起作用,把表单换一下位置,只要是处在第二,第三项目上,就不行。比如第二项之前是身份证,把身份证提到第一项上,姓名为第二项,那么姓名的校验就不好用。
经过1个多小时的,反复实验,从开始的摸不着头脑,现在终于有点了眉目,就思考,为啥是2想不起作用,把rules切换到行内,结果发现只有星号能出现,校验还是失灵。
往下看表单项目,发现有2项是不需要校验的,正好也是2项,会不是是这个问题呢?
于是,去掉一项不需要校验的表单项目,点一下保存,发现失灵项目也少了一项。原因貌似找到了。
继续寻找规律。
把表单的属性,一个一个看,发现这2个不需要校验的项目上,少了 prop 属性。因为不需要校验,就懒得写。
于是加上prop属性再测试。问题解决了。
因为,没有仔细去读 vue 的内部实现代码,具体是校验机制失灵处在那个位置没有去深究,只是凭着契而不舍的反复实验解决了问题。
踩坑,其实是一个技术活。如果不深究,就只能靠经验摸索,就会很累。