112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
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<string, App.Global.FormRule>;
|
|
|
|
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<string, App.Global.FormRule[]>;
|
|
|
|
/** 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<string> | ComputedRef<string>) {
|
|
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<FormInst | null>(null);
|
|
|
|
async function validate() {
|
|
await formRef.value?.validate();
|
|
}
|
|
|
|
async function restoreValidation() {
|
|
formRef.value?.restoreValidation();
|
|
}
|
|
|
|
return {
|
|
formRef,
|
|
validate,
|
|
restoreValidation
|
|
};
|
|
}
|