feat(login): 优化登录表单验证和用户体验

- 移除旧的表单验证规则，采用新的验证逻辑
- 根据标签页动态设置用户名输入框占位符
- 添加手机号格式验证函数
- 在输入框回车事件中触发登录处理
- 增加登录前的表单字段检查和提示信息
- 验证码获取前增加手机号有效性检查

frontend/src/components/login/index.vue

@@ -19,7 +19,6 @@
         </el-tabs>
         <el-form
             :model="loginForm"
-            :rules="loginRules"
             label-position="left"
         >
           <div class="title__main">欢迎！</div>
@@ -32,13 +31,14 @@
             </div>
             <el-input
                 v-model="loginForm.username"
-                placeholder="请输入用户名"
+                :placeholder="usernamePlaceholder"
                 name="username"
                 type="text"
                 maxlength="30"
                 style="width: 270px;"
                 tabindex="1"
                 autocomplete="on"
+                @keyup.enter.native="handleLogin"
             >
             </el-input>
           </el-form-item>
@@ -60,6 +60,7 @@
                   maxlength="30"
                   tabindex="2"
                   autocomplete="on"
+                  @keyup.enter.native="handleLogin"
               >
               </el-input>
             </el-form-item>
@@ -81,6 +82,7 @@
                   tabindex="2"
                   style="width: 270px;"
                   autocomplete="off"
+                  @keyup.enter.native="handleLogin"
               >
                 <template #append>
                   <el-button
@@ -178,22 +180,35 @@ const codeButtonText = computed(() => {
   return isCodeSending.value ? `${countdown.value}s后重新获取` : '获取验证码'
 })
 
-const loginRules = reactive({
-  username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' }
-  ],
-  code: [
-    { required: true, message: '请输入验证码', trigger: 'blur' },
-    { len: 6, message: '验证码长度为6位', trigger: 'blur' }
-  ]
-})
+const usernamePlaceholder = computed(() => activeTab.value === '1' ? '请输入手机号' : '请输入用户名')
+
+const isValidPhone = (value) => /^1\d{10}$/.test(value)
 
 const handleLogin = async () => {
+  const username = loginForm.username.trim()
+  const password = loginForm.password.trim()
+  const code = loginForm.code.trim()
+
+  if (!username) {
+    ElMessage.warning(activeTab.value === '1' ? '请输入手机号' : '请输入用户名')
+    return
+  }
+
+  if (activeTab.value === '0' && !password) {
+    ElMessage.warning('请输入密码')
+    return
+  }
+
+  if (activeTab.value === '1') {
+    if (!isValidPhone(username)) {
+      ElMessage.warning('请输入手机号')
+      return
+    }
+    if (!code) {
+      ElMessage.warning('请输入验证码')
+      return
+    }
+  }
   loading.value = true;
 
   try {
@@ -288,6 +303,10 @@ const sendVerificationCode = () => {
     ElMessage.warning('请先输入手机号')
     return
   }
+  if (!isValidPhone(loginForm.username)) {
+    ElMessage.warning('请输入手机号')
+    return
+  }
 
   const encryptor = new JSEncrypt()
     encryptor.setPublicKey(publicKey)