Form表单 动态更新校验信息校验

[rkxie]

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Form绑定rules，请求返回校验信息更新rules重新校验没有生效 rules = { ...rules, origin_password: origin_password.concat({trigger: 'change', message: '原始密码不正确'}) } formRef.value.validateFields('origin_password') 当然通过validate-status与help属性可以实现，但是表单项数量较多不如rules直接支持简洁

What does the proposed API look like?

Form rules validateFields

[cc-hearts]

需要具体的复现代码

[rkxie]

类似以下更新校验信息不生效：

[cc-hearts]

根据你给出的事例，{message:'原密码错误'} 缺少校验规则，因此我尝试了动态更新校验信息 demo，实现了规则校验的动态更新。 这是我复现的代码：

<template>
  <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules">
    <a-form-item has-feedback label="Password" name="pass">
      <a-input v-model:value="formState.pass" type="password" autocomplete="off" />
    </a-form-item>
    <a-form-item has-feedback label="Age" name="age">
      <a-input-number v-model:value="formState.age" />
    </a-form-item>
  </a-form>
  <a-button type="primary" @click="handleFinish">Submit</a-button>
</template>
<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import type { FormInstance } from 'ant-design-vue';
interface FormState {
  pass: string;
  age: number | undefined;
}
const formRef = ref<FormInstance>();
const formState = reactive<FormState>({
  pass: '',
  age: undefined,
});
const checkAge = async (_rule: Rule, value: number) => {
  if (!value) {
    return Promise.reject('Please input the age');
  }
  if (!Number.isInteger(value)) {
    return Promise.reject('Please input digits');
  } else {
    if (value < 18) {
      return Promise.reject('Age must be greater than 18');
    } else {
      return Promise.resolve();
    }
  }
};

const rules: Record<string, Rule[]> = reactive({
  pass: [{ required: true, trigger: 'change' }],
});
const handleFinish = () => {
  rules.age = [{ validator: checkAge, trigger: 'change' }];
  nextTick(() => {
    formRef.value.validateFields();
  });
};
</script>

[rkxie]

这样处理确实生效，其实只是简单的想加个message信息： rules.age = [{ messgae: 'xxxxx', trigger: 'change', require:true }]; 这样的话其实并没有生效，但是rules.age = [{ validator: checkAge, trigger: 'change' }];是可以的； 上述问题的原因是因为checkAge返回的是一个Promise微任务的原因？

[rkxie]

通过以下方式删除密码框内容更新原始密码不正确为非空校验信息；其实我的意思就是很简单的通过直接更新message来实现校验信息的动态更新 request('url').then(()=>{xxx}).catch((err) => {if(err){rules.origin_password = [{ required: true, validator: async () => Promise.reject('原始密码不正确'), trigger: 'change', }] nextTick(() => { formRef.value.validateFields(); }).then(() => { rules.origin_password = [{ required: true, message: '请输入旧密码', trigger: 'change', }] });}})

[cc-hearts]

动态更新使用 validator 做逻辑校验更为合适

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days