账号输入只能是手机号

src/views/login/components/passwordPage.vue

@@ -1,6 +1,6 @@
 <template>
   <v-form ref="passwordForm" @submit.prevent>
-    <v-text-field v-model="loginData.phone" :disabled="props.phoneDisabled" :placeholder="placeholder ? placeholder : '请输入手机号码'" color="primary" 
+    <v-text-field v-model="loginData.phone" counter="11" :disabled="props.phoneDisabled" :placeholder="placeholder ? placeholder : '请输入手机号码'" color="primary" 
     variant="outlined" density="compact" :rules="phoneRules" validate-on="input" prepend-inner-icon="mdi-cellphone" >
       <!-- <template v-slot:prepend-inner>
         <span class="d-flex">
@@ -39,6 +39,8 @@
 import { ref, reactive } from 'vue'
 defineOptions({ name: 'password-form' })
 import { checkEmail } from '@/utils/validate'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 
 const props = defineProps({ phoneDisabled: Boolean, placeholder: String, validEmail: Boolean })
 const passwordType = ref(false)
@@ -48,6 +50,10 @@ const phoneRules = ref([
   value => {
     if (value) return true
     return props.placeholder ? props.placeholder : '请输入手机号码'
+  },
+  value => {
+    if (value?.length <= 11 && /^1[3456789]\d{9}$/.test(value)) return true
+    return t('login.correctPhoneNumber')
   }
 ])