优化登录注册的验证逻辑

4 weeks ago · a3edcce138
2 changed files with 196 additions and 184 deletions
--- a/pages/start/Registration/Registration.vue
+++ b/pages/start/Registration/Registration.vue
@ -85,7 +85,7 @@
            class="input-field"
            type="text"
            placeholder="请输入验证码"
-            v-model="password"
+            v-model="verifyCode"
          />
        </view>
      </view>
@ -131,7 +131,7 @@
          class="input-field"
          type="text"
          placeholder="请输入验证码"
-          v-model="password"
+          v-model="verifyCode"
        />
      </view>
    </view>
@ -149,7 +149,9 @@
    <button class="register-btn" @click="register">注册</button>

    <!-- 或者 -->
-    <text class="or-text" @click="goToLogin">已有账号？登录 </text>
+    <text class="or-text" @click="goToLogin">已有账号？
+      <text class="link">登录</text>
+       </text>

    <!-- 同意弹窗 -->
    <uniPopup ref="agreementPopup" type="dialog">
@ -194,6 +196,8 @@ const { safeAreaInsets } = uni.getSystemInfoSync();
 const codeBtnText = ref("获取验证码");
 const isCodeBtnDisabled = ref(false); // 添加验证码按钮禁用状态
 const checkboxUrl = ref("../../../static/icons/Check-one-false.png");
+const verifyCode = ref("");
+const account = ref("");

 // 使用从list.js导入的完整国家列表数据
 const countries = ref(
@ -234,11 +238,13 @@ function goToIndex() {
 function switchEmail() {
  // 切换到邮箱注册
  switchType.value = "Email";
+  verifyCode.value = "";
 }

 function switchPhone() {
  // 切换到手机注册
  switchType.value = "Phone";
+  verifyCode.value = "";
 }

 // function register() {
@ -271,31 +277,54 @@ function switchPhone() {
 //   }
 // }
 function register() {
-  if (switchType.value === "Phone") {
-    // 登录逻辑
-    if (!phone.value) {
+  if (!basicVerification()) {
+    return;
+  }
+}
+
+// 基础验证
+function basicVerification() {
+  if (switchType.value === "User") {
+    if (!deepChartID.value) {
      uni.showToast({
-        title: "请输入手机号码",
+        title: "请输入用户名",
        icon: "none",
      });
-      return;
+      return false;
    }

    if (!password.value) {
      uni.showToast({
-        title: "请输入验证码",
+        title: "请输入密码",
        icon: "none",
      });
-      return;
+      return false;
+    }
  }
+
+  if (switchType.value === "Phone") {
+    // 登录逻辑
+    if (!phone.value) {
+      uni.showToast({
+        title: "请输入手机号码",
+        icon: "none",
+      });
+      return false;
+    }
+
    const phoneAll = `${country.value}${phone.value}`;
    console.log("完整手机号" + phoneAll);
-    if (validatePhoneNumber(country.value, phone.value)) {
-      console.log("登录成功:", phoneAll);
+    if (!validatePhoneNumber(country.value, phone.value)) {
+      return false;
    }

-    // 发送登录请求
-    // console.log("登录:", phone.value);
+    if (!verifyCode.value) {
+      uni.showToast({
+        title: "请输入验证码",
+        icon: "none",
+      });
+      return false;
+    }
  }

  if (switchType.value === "Email") {
@ -305,31 +334,27 @@ function register() {
        title: "请输入邮箱地址",
        icon: "none",
      });
-      return;
-    }
-
-    if (!password.value) {
-      uni.showToast({
-        title: "请输入验证码",
-        icon: "none",
-      });
-      return;
+      return false;
    }

    const bool = verificationEmail(email.value);
    console.log("验证是否成功", bool);
-
    // 检查格式是否正确
    if (!bool) {
      uni.showToast({
        title: "邮箱格式不正确",
        icon: "none",
      });
-      return;
+      return false;
    }

-    // 发送登录请求
-    console.log("登录:", email.value);
+    if (!verifyCode.value) {
+      uni.showToast({
+        title: "请输入验证码",
+        icon: "none",
+      });
+      return false;
+    }
  }

  if (!agreed.value) {
@ -338,61 +363,18 @@ function register() {
    return;
  }

-  // 如果已经同意，则继续登录流程
-  // uni.showToast({
-  //   title: "登录成功",
-  //   icon: "success",
-  // });
-}
-
-function goToLogin() {
-  // 跳转到登录页
-  uni.navigateTo({
-    url: "/pages/start/login/login",
-  });
-}
-
-function onPhoneInput(e) {
-  // 确保只允许输入数字
-  const value = e.detail.value;
-  // 使用 isNaN 检查是否为有效数字
-  if (isNaN(value)) {
-    phone.value = "";
-  } else {
-    phone.value = value;
-  }
+  return true;
 }

-// function sendCode() {
-//   // 如果按钮已禁用，则不执行后续逻辑
-//   if (isCodeBtnDisabled.value) return;
-
-//   // 设置按钮为禁用状态
-//   isCodeBtnDisabled.value = true;
-//   codeBtnText.value = "重新发送";
-//   let time = 6;
-//   const timer = setInterval(() => {
-//     time--;
-//     codeBtnText.value = "重新发送 " + time + "S";
-//     if (time <= 0) {
-//       clearInterval(timer);
-//       codeBtnText.value = "重新发送";
-//       // 倒计时结束后启用按钮
-//       isCodeBtnDisabled.value = false;
-//     }
-//   }, 1000);
-
-//   return;
-// }
-
-function sendCode() {
+// 验证码验证
+function VerCodeVerfifcation() { 
    if (switchType.value === "Phone") {
    if (!phone.value) {
      uni.showToast({
        title: "请输入手机号",
        icon: "none",
      });
-      return;
+      return false;
    }

    const bool = verificationPhone(country.value, phone.value);
@ -404,7 +386,7 @@ function sendCode() {
        title: "手机号格式不正确",
        icon: "none",
      });
-      return;
+      return false;
    }
  }

@ -414,7 +396,7 @@ function sendCode() {
        title: "请输入邮箱地址",
        icon: "none",
      });
-      return;
+      return false;
    }
    const bool = verificationEmail(email.value);
    console.log("验证是否成功", bool);
@ -425,8 +407,36 @@ function sendCode() {
        title: "邮箱格式不正确",
        icon: "none",
      });
-      return;
+      return false;
+    }
  }
+
+  return true;
+}
+
+function goToLogin() {
+  // 跳转到登录页
+  uni.navigateTo({
+    url: "/pages/start/login/login",
+  });
+}
+
+function onPhoneInput(e) {
+  // 确保只允许输入数字
+  const value = e.detail.value;
+  // 使用 isNaN 检查是否为有效数字
+  if (isNaN(value)) {
+    phone.value = "";
+  } else {
+    phone.value = value;
+  }
+}
+
+
+function sendCode() {
+ 
+  if (!VerCodeVerfifcation()) { 
+    return ;
  }

  // 如果按钮已禁用，则不执行后续逻辑
@ -522,7 +532,6 @@ function handleAgree() {
  // 继续登录流程
 }

-
 // 处理同意按钮点击
 function handleCancel() {
  // 关闭弹窗
@ -873,7 +882,6 @@ function handleCancel() {
  bottom: 0;
 }

-
 /* 弹窗样式 */
 .popup-content {
  background-color: #ffffff;
@ -883,8 +891,6 @@ function handleCancel() {
  width: 550rpx;
 }

-
-
 .popup-message {
  font-size: 28rpx;
  color: #000000;
--- a/pages/start/login/login.vue
+++ b/pages/start/login/login.vue
@ -327,14 +327,52 @@ function switchPhone() {
  verifyCode.value = "";
 }

+// 登录
 async function register() {
+  if (!basicVerification()) {
+    return;
+  }
+
+  const account = changeAccount();
+
+  const res = await LoginApi({
+    loginType: switchType.value,
+    account: account,
+    verifyCode: verifyCode.value,
+    password: password.value,
+    useCode: verifyCode.value ? true : false,
+    idToken: "",
+  });
+
+  const message = res.message;
+  if (res.code === 200) {
+    // 登录成功
+    uni.showToast({
+      title: "登录成功",
+      icon: "success",
+    });
+    // 跳转到首页
+    uni.switchTab({
+      url: "/pages/start/index/index",
+    });
+  } else {
+    // 登录失败
+    uni.showToast({
+      title: message,
+      icon: "none",
+    });
+  }
+}
+
+// 基础验证
+function basicVerification() {
  if (switchType.value === "User") {
    if (!deepChartID.value) {
      uni.showToast({
        title: "请输入用户名",
        icon: "none",
      });
-      return;
+      return false;
    }

    if (!password.value) {
@ -342,7 +380,7 @@ async function register() {
        title: "请输入密码",
        icon: "none",
      });
-      return;
+      return false;
    }
  }

@ -353,7 +391,13 @@ async function register() {
        title: "请输入手机号码",
        icon: "none",
      });
-      return;
+      return false;
+    }
+
+    const phoneAll = `${country.value}${phone.value}`;
+    console.log("完整手机号" + phoneAll);
+    if (!validatePhoneNumber(country.value, phone.value)) {
+      return false;
    }

    if (!verifyCode.value) {
@ -361,16 +405,8 @@ async function register() {
        title: "请输入验证码",
        icon: "none",
      });
-      return;
-    }
-    const phoneAll = `${country.value}${phone.value}`;
-    console.log("完整手机号" + phoneAll);
-    if (!validatePhoneNumber(country.value, phone.value)) {
-      return;
+      return false;
    }
-
-    // 发送登录请求
-    // console.log("登录:", phone.value);
  }

  if (switchType.value === "Email") {
@ -380,30 +416,27 @@ async function register() {
        title: "请输入邮箱地址",
        icon: "none",
      });
-      return;
-    }
-
-    if (!verifyCode.value) {
-      uni.showToast({
-        title: "请输入验证码",
-        icon: "none",
-      });
-      return;
+      return false;
    }

    const bool = verificationEmail(email.value);
    console.log("验证是否成功", bool);
-
    // 检查格式是否正确
    if (!bool) {
      uni.showToast({
        title: "邮箱格式不正确",
        icon: "none",
      });
-      return;
+      return false;
+    }
+
+    if (!verifyCode.value) {
+      uni.showToast({
+        title: "请输入验证码",
+        icon: "none",
+      });
+      return false;
    }
-    // 发送登录请求
-    // console.log("登录:", email.value);
  }

  if (!agreed.value) {
@ -412,43 +445,57 @@ async function register() {
    return;
  }

-  // 如果已经同意，则继续登录流程
-  // uni.showToast({
-  //   title: "登录成功",
-  //   icon: "success",
-  // });
-
-  const account = changeAccount();
+  return true;
+}

-  const res = await LoginApi({
-    loginType: switchType.value,
-    account: account,
-    verifyCode: verifyCode.value,
-    password: password.value,
-    useCode: verifyCode.value ? true : false,
-    idToken: "",
+// 注册码码验证
+function VerCodeVerfifcation() { 
+    if (switchType.value === "Phone") {
+    if (!phone.value) {
+      uni.showToast({
+        title: "请输入手机号",
+        icon: "none",
      });
+      return false;
+    }

-  const message = res.message;
-  if (res.code === 200) {
-    // 登录成功
+    const bool = verificationPhone(country.value, phone.value);
+    console.log("验证是否成功", bool);
+
+    // 检查格式是否正确
+    if (!bool) {
      uni.showToast({
-      title: "登录成功",
-      icon: "success",
+        title: "手机号格式不正确",
+        icon: "none",
      });
-    // 跳转到首页
-    uni.switchTab({
-      url: "/pages/start/index/index",
+      return false;
+    }
+  }
+
+  if (switchType.value === "Email") {
+    if (!email.value) {
+      uni.showToast({
+        title: "请输入邮箱地址",
+        icon: "none",
      });
-  } else {
-    // 登录失败
+      return false;
+    }
+    const bool = verificationEmail(email.value);
+    console.log("验证是否成功", bool);
+
+    // 检查格式是否正确
+    if (!bool) {
      uni.showToast({
-      title: message,
+        title: "邮箱格式不正确",
        icon: "none",
      });
+      return false;
    }
  }

+  return true;
+}
+
 function changeAccount() {
  if (switchType.value === "User") {
    account.value = deepChartID.value;
@ -545,49 +592,10 @@ function onPhoneInput(e) {
 }

 async function sendCode() {
-  if (switchType.value === "Phone") {
-    if (!phone.value) {
-      uni.showToast({
-        title: "请输入手机号",
-        icon: "none",
-      });
-      return;
-    }
-
-    const bool = verificationPhone(country.value, phone.value);
-    console.log("验证是否成功", bool);

-    // 检查格式是否正确
-    if (!bool) {
-      uni.showToast({
-        title: "手机号格式不正确",
-        icon: "none",
-      });
+  if (!VerCodeVerfifcation()) {
    return;
  }
-  }
-
-  if (switchType.value === "Email") {
-    if (!email.value) {
-      uni.showToast({
-        title: "请输入邮箱地址",
-        icon: "none",
-      });
-      return;
-    }
-    const bool = verificationEmail(email.value);
-    console.log("验证是否成功", bool);
-
-    // 检查格式是否正确
-    if (!bool) {
-      uni.showToast({
-        title: "邮箱格式不正确",
-        icon: "none",
-      });
-      return;
-    }
-  }
-
  // 如果按钮已禁用，则不执行后续逻辑
  if (isCodeBtnDisabled.value) return;

@ -1045,8 +1053,6 @@ function validatePhoneNumber(countryCode, phoneNumber) {
  width: 550rpx;
 }

-
-
 .popup-message {
  font-size: 28rpx;
  color: #000000;