本文針對的場景是沒有手動觸發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