vue antd表单已输入内容但校验一直不消失问题总结

使用antd表单校验规则经常出现已经填写内容了但校验提示一直存在的情况，以下是我遇到并问题总结的解决方法，希望能帮到你们

1、确认rules名称是否正确

2、确认字段绑定的prop与rules里定义的是否一致

3、确认form绑定的model

4、确认form绑定的model是否已初始化各个字段（最常见但容易忽略的情况）

值得注意的是，如果你的表单是在弹框里，在弹框打开的方法中是否对form进行了重新赋值，如果用等于号赋值可能会导致form缺少字段，正确做法是用对象合并的方法或其他的方法也行，只要能包含全部字段。

showModal(info) {
    this.visible = true;
    this.form = Object.assign(this.form, info);  // 对象合并
},

5、在表单校验规则中，输入框、文本框的触发方式最好使用blur，日期选择器、普通选择器使用change

rules: {
        // 输入框使用blur
        name: [{ required: true, message: "请填写名称！", trigger: "blur" }], 

        // 输入框使用blur
        number: [{ required: true, message: "请填写号码！", trigger: "blur" }],

        // 选择器使用change
        time: [{ required: true, message: "请选择日期！", trigger: "change" }],
      },

6、字段赋值问题（这个问题也挺常见的）

有些需求是输入某个字段后，自动识别或异步调用获取信息输入其他的字段。

比如在用户输入身份证后，系统根据身份证号自动识别性别与出生日期，但性别与出生日期的校验提示会一直存在，这是因为组件没有察觉到字段值已更新。

所以在输入了身份证，给性别与日期赋值后，要重新校验一下这两个字段。

// 身份证号输入框的change事件
idNumChange() {
      // 身份证号识别性别与出生日期逻辑省略
      // ...
      this.form.genderCode = '女';
      this.form.birthDate = '1996-07-08';
      this.checkForm("genderCode"); // 性别被重新赋值后，再校验该字段。所传参数为性别绑定的prop值
      this.checkForm("birthDate"); // 出生日期也一样
  },


// 单独校验某个字段
checkForm(key) {
      // 要在a-form绑定ref值才能使用this.$refs.form。 this.$refs. + 你绑定的ref值
      this.$refs.form.validateField(key, (valid) => {
        if (!valid) {
          console.log("submit!!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      this.$forceUpdate(); // 强制刷新
    },