fix：注册界面用户名和电话号码格式校验修改

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",

src/locales/langs/zh-cn.ts

@@ -254,8 +254,9 @@ const local:any = {
         birthDate: '出生日期',
         birthDatePlaceholder: '请选择出生日期',
         birthDateRequired: '请选择出生日期',
-        phoneInvalid:"手机号格式不正确",
-        phoneExists:"手机号已经注册",
+        phoneInvalid:"请输入有效的手机号码",
+        phoneExists:"该手机号已被注册",
+        phoneOptional: '手机号为选填项',
         emailInvalid:"邮箱格式不正确",
         emailExists:"邮箱已经注册",
         emailRequired:"邮箱不能为空",

src/views/_builtin/login/modules/register.vue

@@ -107,28 +107,32 @@ const basicRules = computed<Record<string, Rule | Rule[]>>(() => {
   };
 
   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<Record<string, Rule | Rule[]>>(() => {
       { 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);
 </script>
@@ -329,7 +389,13 @@ const showSteps = computed(() => !isMobile.value);
             </ACol>
             <ACol :lg="24" :span="24">
               <AFormItem name="phone" :label="t('page.login.register.phone')">
-                <AInput v-model:value="basicModel.phone" />
+                <AInput
+                  v-model:value="basicModel.phone"
+                  :placeholder="t('page.login.common.phonePlaceholder')"
+                  @input="handlePhoneInput"
+                  :maxLength="20"
+                  allow-clear
+                />
               </AFormItem>
             </ACol>
             <ACol :lg="24" :span="24">
@@ -540,4 +606,8 @@ const showSteps = computed(() => !isMobile.value);
 .birth-date-picker {
   margin-top: 2px !important;
 }
+
+.phone-input {
+  width: 100%;
+}
 </style>