diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts index 13ae9c42..84e9a045 100644 --- a/apps/web-ele/src/adapter/form.ts +++ b/apps/web-ele/src/adapter/form.ts @@ -8,6 +8,9 @@ import type { ComponentType } from './component'; import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui'; import { $t } from '@vben/locales'; +/** 手机号正则表达式(中国) */ +const MOBILE_REGEX = /(?:0|86|\+86)?1[3-9]\d{9}/; + setupVbenForm({ config: { modelPropNameMap: { @@ -16,18 +19,39 @@ setupVbenForm({ }, }, defineRules: { + // 输入项目必填国际化适配 required: (value, _params, ctx) => { if (value === undefined || value === null || value.length === 0) { return $t('ui.formRules.required', [ctx.label]); } return true; }, + // 选择项目必填国际化适配 selectRequired: (value, _params, ctx) => { if (value === undefined || value === null) { return $t('ui.formRules.selectRequired', [ctx.label]); } return true; }, + // 手机号非必填 + mobile: (value, _params, ctx) => { + if (value === undefined || value === null || value.length === 0) { + return true; + } else if (!MOBILE_REGEX.test(value)) { + return $t('ui.formRules.mobile', [ctx.label]); + } + return true; + }, + // 手机号必填 + mobileRequired: (value, _params, ctx) => { + if (value === undefined || value === null || value.length === 0) { + return $t('ui.formRules.required', [ctx.label]); + } + if (!MOBILE_REGEX.test(value)) { + return $t('ui.formRules.mobile', [ctx.label]); + } + return true; + }, }, }); diff --git a/apps/web-ele/src/views/_core/profile/modules/reset-pwd.vue b/apps/web-ele/src/views/_core/profile/modules/reset-pwd.vue index b357a310..e4e43978 100644 --- a/apps/web-ele/src/views/_core/profile/modules/reset-pwd.vue +++ b/apps/web-ele/src/views/_core/profile/modules/reset-pwd.vue @@ -14,7 +14,11 @@ const [Form, formApi] = useVbenForm({ }, schema: [ { - component: 'InputPassword', + component: 'VbenInputPassword', + componentProps: { + passwordStrength: true, + placeholder: $t('authentication.password'), + }, fieldName: 'oldPassword', label: '旧密码', rules: z @@ -23,7 +27,11 @@ const [Form, formApi] = useVbenForm({ .max(20, '密码长度不能超过 20 个字符'), }, { - component: 'InputPassword', + component: 'VbenInputPassword', + componentProps: { + passwordStrength: true, + placeholder: '请输入新密码', + }, dependencies: { rules(values) { return z @@ -42,7 +50,11 @@ const [Form, formApi] = useVbenForm({ rules: 'required', }, { - component: 'InputPassword', + component: 'VbenInputPassword', + componentProps: { + passwordStrength: true, + placeholder: $t('authentication.confirmPassword'), + }, dependencies: { rules(values) { return z diff --git a/apps/web-ele/src/views/system/user/data.ts b/apps/web-ele/src/views/system/user/data.ts index 91e9649b..c209c8ce 100644 --- a/apps/web-ele/src/views/system/user/data.ts +++ b/apps/web-ele/src/views/system/user/data.ts @@ -3,6 +3,7 @@ import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table'; import type { SystemUserApi } from '#/api/system/user'; import { useAccess } from '@vben/access'; +import { $t } from '@vben/locales'; import { handleTree } from '@vben/utils'; import { z } from '#/adapter/form'; @@ -132,31 +133,50 @@ export function useResetPasswordFormSchema(): VbenFormSchema[] { }, }, { - fieldName: 'newPassword', - label: '新密码', - component: 'InputPassword', + component: 'VbenInputPassword', componentProps: { + passwordStrength: true, placeholder: '请输入新密码', }, + dependencies: { + rules(values) { + return z + .string({ message: '请输入新密码' }) + .min(5, '密码长度不能少于 5 个字符') + .max(20, '密码长度不能超过 20 个字符') + .refine( + (value) => value !== values.oldPassword, + '新旧密码不能相同', + ); + }, + triggerFields: ['newPassword', 'oldPassword'], + }, + fieldName: 'newPassword', + label: '新密码', rules: 'required', }, { - fieldName: 'confirmPassword', - label: '确认密码', - component: 'InputPassword', + component: 'VbenInputPassword', componentProps: { - placeholder: '请再次输入新密码', + passwordStrength: true, + placeholder: $t('authentication.confirmPassword'), }, dependencies: { - rules(values: Record) { - const { newPassword } = values; + rules(values) { return z - .string() - .nonempty('确认密码不能为空') - .refine((value) => value === newPassword, '两次输入的密码不一致'); + .string({ message: '请输入确认密码' }) + .min(5, '密码长度不能少于 5 个字符') + .max(20, '密码长度不能超过 20 个字符') + .refine( + (value) => value === values.newPassword, + '新密码和确认密码不一致', + ); }, - triggerFields: ['newPassword'], + triggerFields: ['newPassword', 'confirmPassword'], }, + fieldName: 'confirmPassword', + label: '确认密码', + rules: 'required', }, ]; } diff --git a/apps/web-ele/src/views/system/user/modules/reset-password-form.vue b/apps/web-ele/src/views/system/user/modules/reset-password-form.vue index 8c083571..bd6ef27f 100644 --- a/apps/web-ele/src/views/system/user/modules/reset-password-form.vue +++ b/apps/web-ele/src/views/system/user/modules/reset-password-form.vue @@ -57,7 +57,6 @@ const [Modal, modalApi] = useVbenModal({ await formApi.setValues(data); }, }); -// TODO @puhui999:重置密码展示不对;