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

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

先贴一段代码：

<template>
  <el-form ref="form" :model="formData" :rules="formRules" label-width="100px" size="medium">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="formData.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 表单验证通过，可以进行提交操作
          // ...
        } else {
          // 表单验证未通过
          return false;
        }
      });
    }
  }
};
</script>

这段代码中我们在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