前言
这几天天写了一些关于修改密码需求,用到了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
