a-form校验同时存在warning和error,并且warning不影响提交

发布时间 2023-10-12 11:36:39作者: 稳住别慌
<a-form-item
  label="名称"
  name="remark"
  :validate-status="validateRemarkStatus"
  :help="validateRemarkHelp"
>
  <a-input
    v-model:value="formState.remark"
    placeholder="请输入名称"
  />
</a-form-item>


const validateRemarkStatus = ref('success');
const validateRemarkHelp = ref('');
const validateRemark = async (_rule: Rule, value: string) => {
    if (value === '') {
        validateRemarkStatus.value = 'error';
        validateRemarkHelp.value = '请输入名称';
        return Promise.reject();
    } else {
        // 名称支持输入中英文、数字、短横线、下划线 ,字符数≤20
        const remarkReg = /^[\u4e00-\u9fa5a-zA-Z0-9-_]{1,20}$/;
        if (!remarkReg.test(value)) {
            validateRemarkStatus.value = 'error';
            validateRemarkHelp.value =
                '由中英文、数字、短横线、下划线组成,不超过20个字符';
            return Promise.reject();
        } else {
            const repeatName = allAppRemark.value.filter(
                (item) =>
                    item.toUpperCase() === value.toUpperCase() &&
                    value !== oldRemark,
            );
            if (repeatName.length) {
                validateRemarkStatus.value = 'error';
                validateRemarkHelp.value = '名称不能重复命名';
                return Promise.reject();
            }
        }
        const envReg = /\b(dev|test|ceshi|stage|pre|pro|prod)\b/;

        if (envReg.test(value)) {
            validateRemarkStatus.value = 'warning';
            validateRemarkHelp.value =
                '命名不规范,建议名称中不包含test、ceshi、dev、pre、stage、pro、prod等环境信息';
            return Promise.resolve();
        }
        validateRemarkStatus.value = 'success';
        validateRemarkHelp.value = '';
        return Promise.resolve();
    }
};