select选择器切换类型后，字段校验提醒没有清除

问题描述：

       我们的转接类型有三个选项：【转出-集团内】【 转出-集团外】【内部调动】

当我们在选择了【转出-集团外】后页面校验了转往党组织名称和转往党委名称字段并弹出rules的message提示，但是当我们切换类型后提示会跟到下一个类型的表单中，如下图：

解决方案：

一、手动触发验证和重置验证状态

1、在选择器的change事件处理函数flowAreaClick中手动触发表单验证，并重置表单的验证状态。

 

flowAreaClick() {
    // 其他逻辑...
    this.$refs.turnOutForm.validate();
    this.$refs.turnOutForm.resetFields();
}

 二、动态调整验证规则

1、创建一个计算属性，根据选择器的值动态返回不同的验证规则对象。

computed: {
    turnOutFormSearchrules() {
        if (this.turnOutForm.transferType === 'nzjlx_002') {
            return {
                transferOrganization: [
                    { required: true, message: '请输入完整党组织名称进行查询!', trigger: 'blur' },
                    { max: 65, message: '最多可以输入 65 个字符！', trigger: 'blur' }
                ],
                // 其他相关字段的规则根据实际情况调整
            };
        } else if (this.turnOutForm.transferType === 'nzjlx_003') {
            return {
                transferOrganizationW: [
                    { required: true, message: '请输入完整党组织名称!', trigger: 'blur' },
                    { max: 65, message: '最多可以输入 65 个字符！', trigger: 'blur' }
                ],
                transferCommittee: [
                    { required: true, message: '请输入完整党委名称!', trigger: 'blur' },
                    { max: 65, message: '最多可以输入 65 个字符！', trigger: 'blur' }
                ],
                // 其他相关字段的规则根据实际情况调整
            };
        } else if (this.turnOutForm.transferType === 'nzjlx_004') {
            return {
                transferOrganizationN: [
                    { required: true, message: '请选择党组织名称!', trigger: 'blur' },
                    { max: 65, message: '最多可以输入 65 个字符！', trigger: 'blur' }
                ],
                // 其他相关字段的规则根据实际情况调整
            };
        }
        return {};
    }
}

2、另外一种写法

 

computed: {
  turnOutFormSearchrules() {
    const commonRules = {
      transOutReason: [{ required: true, message: '请选择转出事由！', trigger: 'change' }],
      remark: [{ max: 65, message: '最多可以输入65个字符！', trigger: 'blur' }],
      duesDate: [{ required: true, type: "date", message: '请选择党费交至日期', trigger: 'blur' }],
      validityTime: [
        { required: true, message: "有效期不能为空，最多4个字符！", trigger: "blur" },
        { max: 4, message: "最多可以输入4字，已超最大限制！", trigger: "blur" },
        {
          validator: function (rule, value, callback) {
            value = Number(value)
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字！'));
            } else {
              callback();
            }
          }, trigger: 'blur'
        }
      ]
    };

    const rulesMap = {
      nzjlx_002: {
        transferOrganization: [
          { required: true, message: '请输入完整党组织名称进行查询!', trigger: 'blur' },
          { max: 65, message: '最多可以输入 65 个字符！', trigger: 'blur' }
        ],
        ...commonRules
      },
      nzjlx_003: {
        transferOrganizationW: [
          { required: true, message: '请输入完整党组织名称!', trigger: 'blur' },
          { max: 65, message: '最多可以输入 65 个字符！', trigger: 'blur' }
        ],
        transferCommittee: [
          { required: true, message: '请输入完整党委名称!', trigger: 'blur' },
          { max: 65, message: '最多可以输入 65 个字符！', trigger: 'blur' }
        ],
        ...commonRules
      },
      nzjlx_004: {
        transferOrganizationN: [
          { required: true, message: '请选择党组织名称!', trigger: 'blur' },
          { max: 65, message: '最多可以输入 65 个字符！', trigger: 'blur' }
        ],
        ...commonRules
      },
      default: {
        transferType: [{ required: true, message: '请选择转接类型！', trigger: 'change' }],
        radio: [{ required: true, message: '请选择转往党组织类型！', trigger: 'blur' }],
        transferOrganization: [
          { required: true, message: '请输入完整党组织名称进行查询!', trigger: 'blur' },
          { max: 65, message: '最多可以输入65个字符！', trigger: 'blur' }
        ],
        transferOrganizationW: [
          { required: true, message: '请输入完整党组织名称!', trigger: 'blur' },
          { max: 65, message: '最多可以输入65个字符！', trigger: 'blur' }
        ],
        transferOrganizationN: [
          { required: true, message: '请选择党组织名称!', trigger: 'blur' },
          { max: 65, message: '最多可以输入65个字符！', trigger: 'blur' }
        ],
        transferCommittee: [
          { required: true, message: '请输入完整党委名称!', trigger: 'blur' },
          { max: 65, message: '最多可以输入65个字符！', trigger: 'blur' }
        ],
        ...commonRules
      }
    };

    const selectedRule = rulesMap[this.turnOutForm.transferType] || rulesMap.default;
    return selectedRule;
  }
}

通过以上方法，我们可以根据选择器的值动态调整验证规则，并在切换选择器时手动触发验证和重置验证状态，以确保校验信息正常显示和消失。