[Vue] el-form 表单验证的异常情况

本文针对的场景是没有手动触发el-form的validator验证，但是async-validator自动触发(验证)，控制台async-validator验证报错的情况。

先贴一段代码：

这段代码中我们在submitForm时通过this.$refs.form.validate来验证表单中的username和password字段，这没有问题。

el-from验证调用了async-validator，上面的情况是提交时手动触发validator。

本文说的是没有手动触发validator验证，但是控制台async-validator报错(async-validator自动触发)的情况。

当el-from 上rules属性绑定的验证规则发生变化(即 :rules="formRules"中的formRules变更) 无论是formRules的对象内存地址变化，还是对象中的key 或者 key对应的value变更，都会触发async-validator。

说个场景，如未满18岁用户需要验证监护人。用computed来做rules判断

computed: {
  formRules() {
    const basicRules = {...};
    if (age < 18) {
      return {
      ...basicRules,
      otherRules
      }
    }
    return basicRules;
  }
}

这时候来回切换用户信息，表单就会发生没有手动触发校验，但自行校验的情况。

解决这个问题有两种思路
1、拆分rules同时拆分表单，一个表单拆为两个表单，两个表单绑定两套验证规则
2、不拆分表单，但每次绑定值发生变化时，通过clearValidate()清空验证状态。

完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/ih59cyi0r97kcnke