fix: email validation issue

components/auth/Input.vue

@@ -53,7 +53,7 @@ const classNames = computed(() => {
 }
 
 .input {
-  @apply h-12 w-full bg-transparent outline-none border-0 border-b-1 border-gray-200 pl-10 text-current;
+  @apply h-12 w-full bg-transparent outline-none border-0 border-b-1 border-gray-200 pl-10 text-current rounded-0;
 
   &:focus {
     + .input-border {

package.json

@@ -25,6 +25,7 @@
     "@pinia/nuxt": "^0.4.11",
     "@types/md5": "^2.3.2",
     "@types/node": "^20.5.6",
+    "@types/validator": "^13.11.1",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
     "@typescript-eslint/parser": "^6.4.1",
     "@unocss/nuxt": "^0.55.3",
@@ -75,9 +76,14 @@
     "stylelint-scss": "^5.1.0",
     "typescript": "^5.2.2",
     "unplugin-icons": "^0.16.5",
+    "validator": "^13.11.0",
     "vant": "^4.6.6",
     "vite": "^4.4.9",
     "vue-masonry": "^0.16.0",
     "xss": "^1.0.14"
+  },
+  "dependencies": {
+    "@types/lodash-es": "^4.17.8",
+    "lodash-es": "^4.17.21"
   }
 }

pages/auth/login.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import isEmail from 'validator/es/lib/isEmail'
+import { debounce } from 'lodash-es'
 definePageMeta({
   layout: 'auth'
 })
@@ -11,18 +13,20 @@ const password = ref('')
 // 验证器相关
 const tips = ref('占位符')
 const isTips = ref<boolean | null>(null)
-const doValidate = () => {
+const doValidate = debounce(() => {
   if (!email.value || !password.value) {
     tips.value = '邮箱或密码不能为空'
-    return true
+    isTips.value = true
+    return
   }
-  if (!/^\w+@\w+\.\w+$/.test(email.value)) {
+  if (!isEmail(email.value)) {
     tips.value = '邮箱格式不正确'
-    return true
+    isTips.value = true
+    return
   }
-  tips.value = '占位符'
-  return false
-}
+  tips.value = ''
+}, 50)
+
 const disabled = computed(() => {
   return isTips.value == null || isTips.value
 })
@@ -37,7 +41,6 @@ const doLogin = async () => {
       email: email.value,
       password: password.value
     })
-    console.log(data)
     if (!data.value?.status || data.value?.status != 200) {
       // 登录失败
       tips.value = data.value?.message || '未知错误'
@@ -74,7 +77,7 @@ onMounted(() => {
           type="text"
           name="email"
           placeholder="邮箱"
-          @blur="isTips = doValidate()"
+          @input="doValidate()"
         />
       </div>
       <div class="input-group">
@@ -84,7 +87,7 @@ onMounted(() => {
           type="password"
           name="password"
           placeholder="密码"
-          @blur="isTips = doValidate()"
+          @input="doValidate()"
         />
       </div>
       <div class="mt-15">