阅读 680

关于Element表单对部分表单字段进行校验的方法validateField相关小问题

前言

这几天天写了一些关于修改密码需求,用到了Element表单验证由于是要做渐进式的表单所以就要用到Element表单验证的 validateField 方法

方法

validateField((props: array | string, callback: Function(errorMessage: string)))

  • 参数一 props:传入要校验的表单里的单独的哪一项具体的标识是 <el-form-item prop="userName" </el-form-item> 里的 prop 如果要检验多个则要传入由多个prop组成的一个数组,

  • 参数二callback回调函数内有一个参数是errorMessage当验证不通过的时候errorMessage里存的是报错信息如果是没有报错则errorMessage里没有值

1 this.$refs[formName].validateField("userName"(errorMessage) => {
2        if (!errorMessage) {
3        //验证通过执行的函数...
4        } else {
5          console.log("error");
6        }
7      });
复制代码

小问题

上面介绍了一改方法的使用方法,但我们一般使用的时候回出现一点小问题

问题1:validateField 验证的通过执行的函数失效

  • 问题详情:当使用 validateField 校验完以后无论执行上面方法都失效.

  • 原因:这个是由于执行的了自定义函数的验证完没有callback()回调函数 如图

这个callback()有一定要写,不写是不会执行验证成功的函数的.

问题2:渐进式表单验证页面一渐进页面的校验就立即触发

问题复现:如图第一步 如图第二步 这样虽然无伤大雅,但是极大程度成减少了用户体验,身为一个优秀的前端,这种问题是不容忽视的

原因:导致这个问题有很多方法比如 没有用部分校验直接用的是全体校验,还有就是渐进式表单的显示隐藏用的v-if因为使用v-if会让表单刚生成的时候触发表单验证所以这里建议用v-show

文章分类
前端
文章标签