登录添加手机号输入正确提示

src/assets/img/login/correct.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1725866385135" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17452" width="20" height="20" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M513.365333 170.666667C300.928 170.666667 128 342.229333 128 554.666667s171.562667 384 384 384 384-171.562667 384-384c1.365333-212.437333-170.24-384-382.634667-384z m-21.888 544.384a33.024 33.024 0 0 1-39.893333 5.12c-2.56-1.28-5.12-2.56-6.4-5.12L323.157333 576a32.597333 32.597333 0 0 1 0-46.293333 32.597333 32.597333 0 0 1 46.336 0l98.816 115.84 212.224-212.181334a32.597333 32.597333 0 0 1 46.293334 0 32.597333 32.597333 0 0 1 0 46.293334l-235.349334 235.349333z" fill="#5DCB5A" p-id="17453"></path></svg>

src/pages/account/login/accountApplyMatch.vue

@@ -10,9 +10,11 @@
         <el-form-item prop="workNumber" label="学号">
           <el-input disabled v-model="form.workNumber"></el-input>
         </el-form-item>
-        <el-form-item prop="phone" label="手机号">
-          <el-input placeholder="请输入手机号" maxlength="11" v-model.trim="form.phone"
-            @input="checkAccountByPhoneReg"></el-input>
+        <el-form-item ref="phoneItem" prop="phone" label="手机号">
+          <el-input placeholder="请输入手机号" maxlength="11" v-model.trim="form.phone" @input="checkAccountByPhoneReg">
+            <img v-if="!exist" slot="suffix" style="margin-top: -6px;" src="@/assets/img/login/correct.svg" alt="">
+          </el-input>
+          <p v-if="phoneMsg" class="el-form-item__error">{{ phoneMsg }}</p>
         </el-form-item>
         <el-form-item prop="userName" label="姓名">
           <el-input placeholder="请输入姓名" v-model="form.userName" :disabled="exist"></el-input>
@@ -62,6 +64,7 @@ export default {
     return {
       accountVisible: false,
       exist: true,
+      phoneMsg: '',
       form: {
         schoolId: '',
         account: '',
@@ -99,13 +102,17 @@ export default {
     // 注册手机号输入完回调。没有账号才能继续操作
     async checkAccountByPhoneReg (val) {
       if (!this.$parent.phoneReg.test(val)) {
+        this.$refs.phoneItem.clearValidate()
+        this.phoneMsg = '请输入正确的手机号'
         this.exist = true
         return false
       }
 
       try {
         const { message } = await this.$get(`${this.api.forgotPreVerification}?phoneOrEmail=${val}&platform=${Setting.platformId}`)
-        this.exist = message === 'success' // 用户已存在
+        const exist = message === 'success' // 用户已存在
+        this.exist = exist // 用户已存在
+        this.phoneMsg = exist ? '该手机号已注册！' : ''
         this.form.workNumber = this.exist ? '' : val
       } catch (e) { }
     },

src/pages/account/login/index.vue

@@ -31,7 +31,10 @@
             <el-form-item prop="account" ref="phoneItem">
               <label class="label account"></label>
               <el-input v-model.trim="form.account" placeholder="请输入手机号/邮箱" @input="val => checkAccountByPhone(val, 0)"
-                @keyup.enter.native="submit"></el-input>
+                @keyup.enter.native="submit">
+                <img v-if="verFormEnable" slot="suffix" class="correct-icon" src="@/assets/img/login/correct.svg"
+                  alt="">
+              </el-input>
               <p v-if="diaClientMsg" class="el-form-item__error">{{ diaClientMsg }}</p>
             </el-form-item>
             <el-form-item prop="code">
@@ -148,7 +151,10 @@
       <el-form class="dia-form" ref="pwForm" label-width="110px" :model="pwForm" :rules="pwRules">
         <el-form-item prop="phoneOrEmail" label="手机号/邮箱" ref="diaPhoneItem">
           <el-input placeholder="请输入手机号/邮箱" v-model.trim="pwForm.phoneOrEmail"
-            @input="val => checkAccountByPhone(val, 1)"></el-input>
+            @input="val => checkAccountByPhone(val, 1)">
+            <img v-if="diaClientExist" slot="suffix" style="margin-top: -6px;" src="@/assets/img/login/correct.svg"
+              alt="">
+          </el-input>
           <p v-if="diaClientMsg" class="el-form-item__error">{{ diaClientMsg }}</p>
         </el-form-item>
         <el-form-item prop="code" label="验证码">
@@ -510,7 +516,7 @@ export default {
     async checkAccountByPhone (val, type) {
       if (!this.phoneReg.test(val) && !this.mailReg.test(val)) {
         this.$refs[type ? 'diaPhoneItem' : 'phoneItem'].clearValidate()
-        this.diaClientMsg = ''
+        this.diaClientMsg = '请输入正确的手机号/邮箱'
         this[type ? 'diaClientExist' : 'verFormEnable'] = false
         return false
       }
@@ -845,6 +851,11 @@ export default {
     background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
   }
 
+  .correct-icon {
+    width: 30px;
+    margin: 11px 3px 0 0;
+  }
+
   .school {
     background-image: url(../../../assets/img/login/school.png);
   }