From fc177c6b8842ac390a2938de25a9c3742b5587d6 Mon Sep 17 00:00:00 2001 From: zhongzm Date: Wed, 15 Jan 2025 14:25:51 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=B3=A8=E5=86=8C=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E7=94=A8=E6=88=B7=E5=90=8D=E5=92=8C=E7=94=B5=E8=AF=9D?= =?UTF-8?q?=E5=8F=B7=E7=A0=81=E6=A0=BC=E5=BC=8F=E6=A0=A1=E9=AA=8C=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/locales/langs/en-us.ts | 5 +- src/locales/langs/zh-cn.ts | 5 +- src/views/_builtin/login/modules/register.vue | 92 ++++++++++++++++--- 3 files changed, 87 insertions(+), 15 deletions(-) diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index 045c768..fd9d07b 100644 --- a/src/locales/langs/en-us.ts +++ b/src/locales/langs/en-us.ts @@ -254,8 +254,9 @@ const local: any = { birthDate: 'Birth Date', birthDatePlaceholder: 'Please select birth date', birthDateRequired: 'Please select birth date', - phoneInvalid:"The mobile phone number is incorrect", - phoneExists:"The mobile phone number has been registered", + phoneInvalid: 'Please enter a valid phone number', + phoneExists: 'This phone number is already registered', + phoneOptional: 'Phone number is optional', emailInvalid:"The email is incorrect", emailExists:"The email has been registered", emailRequired:"The email cannot be empty", diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index 8aa2231..41500e5 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -254,8 +254,9 @@ const local:any = { birthDate: '出生日期', birthDatePlaceholder: '请选择出生日期', birthDateRequired: '请选择出生日期', - phoneInvalid:"手机号格式不正确", - phoneExists:"手机号已经注册", + phoneInvalid:"请输入有效的手机号码", + phoneExists:"该手机号已被注册", + phoneOptional: '手机号为选填项', emailInvalid:"邮箱格式不正确", emailExists:"邮箱已经注册", emailRequired:"邮箱不能为空", diff --git a/src/views/_builtin/login/modules/register.vue b/src/views/_builtin/login/modules/register.vue index 6b50932..c0ec723 100644 --- a/src/views/_builtin/login/modules/register.vue +++ b/src/views/_builtin/login/modules/register.vue @@ -107,28 +107,32 @@ const basicRules = computed>(() => { }; const validatePhone = async (_rule: Rule, value: string) => { - // 如果没有填写手机号，直接返回成功 - if (!value || value.trim() === '') { + if (!value) { return Promise.resolve(); } - // 手机号格式验证 - const phonePattern = /^1[3-9]\d{9}$/; - if (!phonePattern.test(value)) { + // 去除所有空格后再验证 + const trimmedValue = value.replace(/\s/g, ''); + if (!trimmedValue) { + return Promise.resolve(); + } + + // 基本格式验证 - 至少3个字符 + const phonePattern = /^.{3,}$/; + if (!phonePattern.test(trimmedValue)) { return Promise.reject(t('page.login.register.phoneInvalid')); } - // 手机号重复性验证 + // 手机号重复性验证 - 使用去除空格后的值 try { - const { exists } = await authStore.checkUserRepeat({ phonenumber: value, authType: 'u' }); + const { exists } = await authStore.checkUserRepeat({ phonenumber: trimmedValue, authType: 'u' }); if (exists) { return Promise.reject(t('page.login.register.phoneExists')); } return Promise.resolve(); } catch (error) { - // 如果服务器验证出错，不阻止表单提交 console.error('Phone validation error:', error); - return Promise.resolve(); + return Promise.reject(t('page.login.register.validationError')); } }; @@ -137,7 +141,9 @@ const basicRules = computed>(() => { { required: true, message: t('page.login.register.usernameRequired'), trigger: 'change' }, { validator: validateUsername, trigger: 'blur' } ], - phone: [{ validator: validatePhone, trigger: 'blur' }], + phone: [ + { validator: validatePhone, trigger: 'blur' } + ], birthDate: [{ required: true, message: t('page.login.register.birthDateRequired') }], fullName: [] }; @@ -258,6 +264,60 @@ async function handleSubmit() { } } +// 处理手机号输入 +const handlePhoneInput = (e: Event) => { + const input = e.target as HTMLInputElement; + let value = input.value; + + // 去除所有空格 + value = value.replace(/\s/g, ''); + + // 处理加号：只保留第一个加号，去除其他加号 + if (value.includes('+')) { + const parts = value.split('+'); + value = '+' + parts.slice(1).join('').replace(/\+/g, ''); + } + + // 去除非数字和加号以外的字符 + value = value.replace(/[^\d+]/g, ''); + + // 如果只有加号，清空值 + if (value === '+') { + value = ''; + } + + // 限制长度 + if (value.length > 20) { + value = value.slice(0, 20); + } + + // 格式化手机号 + if (value.startsWith('+')) { + // 如果以+开头 + if (value.startsWith('+86')) { + // 中国区号格式：+86 185 1234 5678 + const restNumber = value.slice(3); // 去掉+86 + if (restNumber) { + value = `+86 ${restNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3')}`; + } + } else { + // 其他国际号码格式：+xx xxxx xxxx xxxx + const countryCode = value.match(/^\+\d{1,3}/)?.[0] || ''; + const restNumber = value.slice(countryCode.length); + const formattedRest = restNumber.replace(/(\d{4})/g, '$1 ').trim(); + value = countryCode ? `${countryCode} ${formattedRest}` : formattedRest; + } + } else if (value.startsWith('1') && value.length <= 11) { + // 如果是国内手机号（以1开头且长度不超过11位）：185 1234 5678 + value = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1 $2 $3'); + } else { + // 其他情况（可能是直接输入的国外号码）：xxxx xxxx xxxx + value = value.replace(/(\d{4})/g, '$1 ').trim(); + } + + basicModel.phone = value; +}; + // 在script setup部分添加一个新的计算属性 const showSteps = computed(() => !isMobile.value); @@ -329,7 +389,13 @@ const showSteps = computed(() => !isMobile.value); - + @@ -540,4 +606,8 @@ const showSteps = computed(() => !isMobile.value); .birth-date-picker { margin-top: 2px !important; } + +.phone-input { + width: 100%; +}