<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(); } };