import { ref, toValue } from 'vue'; import type { ComputedRef, Ref } from 'vue'; import type { FormInst } from 'naive-ui'; import { REG_CODE_SIX, REG_EMAIL, REG_PHONE, REG_PWD, REG_USER_NAME } from '@/constants/reg'; import { $t } from '@/locales'; export function useFormRules() { const patternRules = { userName: { pattern: REG_USER_NAME, message: $t('form.userName.invalid'), trigger: ['change', 'blur'] }, phone: { pattern: REG_PHONE, message: $t('form.phone.invalid'), trigger: 'change' }, pwd: { pattern: REG_PWD, message: $t('form.pwd.invalid'), trigger: ['change', 'blur'] }, code: { pattern: REG_CODE_SIX, message: $t('form.code.invalid'), trigger: 'change' }, email: { pattern: REG_EMAIL, message: $t('form.email.invalid'), trigger: 'change' } } satisfies Record; const formRules = { userName: [createRequiredRule($t('form.userName.required')), patternRules.userName], phone: [createRequiredRule($t('form.phone.required')), patternRules.phone], pwd: [createRequiredRule($t('form.pwd.required')), patternRules.pwd], code: [createRequiredRule($t('form.code.required')), patternRules.code], email: [createRequiredRule($t('form.email.required')), patternRules.email], tenantId: [createRequiredRule('请选择/输入公司名称')] } satisfies Record; /** the default required rule */ const defaultRequiredRule = createRequiredRule($t('form.required')); /** the default number required rule */ function createRequiredRule(message: string): App.Global.FormRule { return { required: true, trigger: ['input', 'blur'], validator: (_rule: any, value: any) => { if (value === null || value === undefined || value === '') { return new Error(message); } return true; } }; } function createNumberRequiredRule(message: string): App.Global.FormRule { return { ...createRequiredRule(message), type: 'number' }; } /** create a rule for confirming the password */ function createConfirmPwdRule(pwd: string | Ref | ComputedRef) { const confirmPwdRule: App.Global.FormRule[] = [ { required: true, message: $t('form.confirmPwd.required') }, { asyncValidator: (rule, value) => { if (value.trim() !== '' && value !== toValue(pwd)) { return Promise.reject(rule.message); } return Promise.resolve(); }, message: $t('form.confirmPwd.invalid'), trigger: 'input' } ]; return confirmPwdRule; } return { patternRules, formRules, defaultRequiredRule, createRequiredRule, createConfirmPwdRule, createNumberRequiredRule }; } export function useNaiveForm() { const formRef = ref(null); async function validate() { await formRef.value?.validate(); } async function restoreValidation() { formRef.value?.restoreValidation(); } return { formRef, validate, restoreValidation }; }