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]

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

请求

<script setup> const formRef = ref(); const formStateRef = reactive({ origin_password: '', update_password: '', resaw_password: '', }); const rules = reactive({ origin_password: [ { required: true, trigger: 'change' } ], update_password: [ { required: true, validator: async(_rule, value) => { if(value.length === 0){ return Promise.reject('请输入新密码'); }else if(!(/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{14,}$/.test(value))){ return Promise.reject('密码至少包含大小写字母数字特殊符号其中三种,最短为14位'); }else if(value === formStateRef.origin_password){ return Promise.reject('原密码和新密码一致，无需修改'); }else{ formRef.value.validateFields('resaw_password') return Promise.resolve(); } }, trigger: 'change', } ], resaw_password: [ { required: true, validator: async(_rule, value) => { if(value.length === 0){ return Promise.reject('请输入确认密码'); }else if(value !== formStateRef.update_password){ return Promise.reject('确认密码和新密码不一致'); }else{ return Promise.resolve(); } }, trigger: 'change', } ] }) const handleSubmit = () => { const resetData = { oldPwd: formStateRef.origin_password, newPwd: formStateRef.update_password } _this.$rest.post('xxxx', {data:resetData }).then((result) => { //xxx }).catch(() =>{ rules.origin_password = [{message:'原密码错误'}] //formRef.value.validateFields() }) } </script>

[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 做逻辑校验更为合适