ant design vue 当rules改变后，validate结果不正确

Ant Design Vue 是一个基于 Vue.js 的企业级前端设计语言和组件库，它提供了丰富的 UI 组件和工具，可以帮助我们快速构建出现代化的 Web 应用程序。在 Ant Design Vue 中，Form 组件是一个常用的表单组件，它可以方便地进行表单校验。

前言

在 Ant Design Vue 的 Form 组件中，我们可以通过设置 rules 属性来进行校验。rules 是一个对象数组，每个对象代表一个校验规则，包含了校验类型和校验错误提示信息等。当用户输入发生变化时，我们可以通过调用 validate 方法来进行校验。然而，在特定的情况下，当 rules 发生变化时，validate 方法可能会出现结果不正确的情况。

问题描述

假设我们有一个简单的表单，包含一个输入框和一个按钮。初始状态下，我们设置了一个校验规则：输入框的内容不能为空。当用户输入内容后点击按钮，我们调用 validate 方法进行校验。此时，校验结果应该是有效的，即输入框的内容不为空。然而，当我们动态改变 rules 的值后再次调用 validate 方法时，校验结果可能不正确。

<template>
  <div>
    <a-form :form="form">
      <a-form-item label="输入框" :rules="rules">
        <a-input v-model="inputValue" />
      </a-form-item>
      <a-button type="primary" @click="handleValidate">校验</a-button>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      inputValue: "",
      rules: [{
        required: true,
        message: "输入框不能为空"
      }]
    };
  },
  methods: {
    handleValidate() {
      this.form.validate((validity) => {
        if (validity) {
          console.log("校验通过");
        } else {
          console.log("校验不通过");
        }
      });
    }
  }
};
</script>

在上述代码中，我们定义了一个简单的 Form 组件，包含一个输入框和一个按钮。我们使用了 Ant Design Vue 提供的 a-form 和 a-form-item 组件来构建表单，并通过 v-model 指令绑定了输入框的值。在 rules 属性中，我们设置了一个校验规则：输入框的值不能为空。

在 handleValidate 方法中，我们调用了 form.validate 方法进行校验。该方法会返回一个结果，如果校验通过，结果为 true，否则为 false。我们根据校验结果打印出相应的提示信息。

问题分析

在 Ant Design Vue 中，Form 组件的校验是基于 async-validator 库实现的。在每次调用 validate 方法时，它会根据当前的 rules 进行校验并返回结果。然而，当我们动态改变 rules 的值后再次调用 validate 方法时，该方法并没有重新计算校验结果，而是直接返回了上一次的结果。这就导致了当 rules 改变后，validate 结果不正确的问题。

解决方案

为了解决上述问题，我们可以在每次改变 rules 后手动调用 form.resetFields 方法重置表单的字段。这样可以让 validate 方法重新计算校验结果，确保结果的准确性。

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      inputValue: "",
      rules: [{
        required: true,
        message: "输入框不能为空"
      }]
    };
  },
  watch: {
    rules(newRules) {
      this.form.resetFields();
    }
  },
  methods: {
    handleValidate() {
      this.form.validate((validity) => {
        if (validity) {
          console.log("校验通过");
        } else {
          console.log("校验不通过");
        }
      });
    }
  }
};
</script>

在上述代码中，我们使用了 Vue 的 watch 方法监听 rules 的变化，在每次 rules 改变时调用 form.resetFields 方法重置表单的字段。这样，在下次调用 validate 方法时，它会重新计算校验结果，从而解决了 validate 结果不正确的问题。