忘记密码页面添加错误提示

src/components/forgetPassword/FindPassword.vue

@@ -21,25 +21,36 @@
                     </div> -->
                     <form>
                         <div class="first" v-if="flag==1">
-                            <input type="tel" name="" v-model="phone" maxlength="11" @input="handleTelInput"
-                                   placeholder="手机号" @blur="checkPhone">
+                            <div class="phoneBox">
+                                <input type="tel" :class="{error: phoneErrText}" name="" v-model="phone" maxlength="11" @input="handleTelInput"
+                                    placeholder="手机号" @blur="checkPhone">
+                                <span class="tips" v-show="phoneErrText" >{{phoneErrText}}</span>
+                            </div>
+                            
                             <div class="yanzm" maxlength="11">
-                                <input type="text" name="" v-model="picCode" @blur="checkImgCode" maxlength="4"
+                                <input type="text" :class="{error: imgErrText}" name="" v-model="picCode" @blur="checkImgCode" maxlength="4"
                                        placeholder="图形验证码">
-
                                 <img :src='"data:image/png;base64,"+imgCode' @click="refreshCode">
+                                <span class="tips" >{{imgErrText}}</span>
                             </div>
                             <div class="yanzm">
                                 <input type="text" name="" v-model="msgCode" maxlength="6" placeholder="短信验证码" @blur="checkMsgCode">
                                 <div v-if="timerFlag" type="primary" class="getMsg disabled">{{'再次发送(' + time + ')'}}</div>
                                 <div v-else class="getMsg" @click="getMsgCode">获取验证码</div>
+                                 <span class="tips" v-show="SMSErrText">{{SMSErrText}}</span>
                             </div>
-                            <span class="tips" v-show="imgCodeErr">{{codeErrText}}</span>
+                           
                         </div>
                         <div class="second" v-if="flag == 2">
-                            <input type="password" name="" placeholder="新密码（6-16位字母、数字组合）" v-model="newPsw"
+                          <div class="phoneBox">
+                              <input type="password" :class="{error: newPswErrText}" name="" placeholder="新密码（6-16位字母、数字组合）" v-model="newPsw"
                                    @blur="checkPsw" maxlength="16">
+                              <span class="tips" v-show="newPswErrText">{{newPswErrText}}</span>
+                          </div>
+                          <div class="phoneBox">
                             <input type="password" name="" placeholder="确认新密码（6-16位字母、数字组合）" v-model="newPswAgain"  maxlength="16">
+
+                          </div>
                         </div>
                         <div class="third" v-if="flag == 3">
                             <img class="modifyImg" src="../../images/success.png" alt="">
@@ -79,7 +90,7 @@
         nextText: '下一步',
         changCor: true,
         imgCodeErr: false,
-        time: 60,
+        time: 180,
         timer: null,
         timerFlag: false,//倒计时标识
         newPawComplete: false,//进度条1
@@ -92,6 +103,10 @@
         msgCodeTime:180,
         codeErrText:'',
         modifiPsw:'',//修改密码
+        phoneErrText: '', //用户名错误信息
+        imgErrText: '', //图片验证码错误信息
+        SMSErrText: '',  //短信验证码错误信息
+        newPswErrText: '' //新密码错误信息
 
       }
     },
@@ -173,11 +188,12 @@
           api.vertifyImgCode(params).then((res) => {
             if (+res.data.code != 0) {//验证失败
               this.imgCodeErr = true
-              this.codeErrText = "图形验证码错误";
+              this.imgErrText = "图形验证码错误";
             } else {
               this.imgCodeErr = false
               /*window.clearInterval(this.picTimer);
               this.picTime = 600*/
+              this.imgErrText = "";
             }
           }).catch((err) => {
             console.log(err);
@@ -195,14 +211,15 @@
               type: 'warning'
             });*/
             this.imgCodeErr = true;
-            this.codeErrText = "手机格式不正确";
+            this.phoneErrText = "手机格式不正确";
             this.phone = "";
           }else{//验证手机号是否注册
             this.imgCodeErr = false;
             api.checkForgetTel(this.phone).then((res)=>{
               if(+res.data.code == 0){
-                
+                 this.phoneErrText = ''
               }else{
+                this.phoneErrText = ''
                 this.$message({
                   message: res.data.msg,
                   type: 'warning'
@@ -220,10 +237,10 @@
             type: 'warning'
           });*/
           this.imgCodeErr = true;
-          this.codeErrText = "手机号不能为空";
+          this.phoneErrText = "手机号不能为空";
         }else if(!this.picCode){
           this.imgCodeErr = true
-          this.codeErrText = "图形验证码不能为空";
+          this.imgErrText = "图形验证码不能为空";
         }else{
           //调请求接口
           if(!this.imgCodeErr){
@@ -282,18 +299,20 @@
       checkPsw() {//校验密码
         // const pswlReg = /^(?![0-9]+$)(?![a-zA-Z]+$)/;
         const pswlReg = utils.pswReg;
-        const psw = this.psw;
+        const psw = this.newPsw;
+        console.log('assssssss', psw)
         if (psw) {
           if (psw.trim().length < 6 || psw.trim().length > 16) {
             this.imgCodeErr = true;
-            this.codeErrText = "密码长度为6-16位";
+            this.newPswErrText = "密码长度为6-16位";
             this.psw = "";
           }
           else if (!pswlReg.test(psw)) {
             this.imgCodeErr = true;
-            this.codeErrText = "密码过于简单";
+            this.newPswErrText = "密码过于简单";
             this.psw = "";
           }else{
+            this.newPswErrText = ''
             this.imgCodeErr = false;
           }
         }
@@ -315,7 +334,7 @@
             } else {
               // this.$message.error('短信验证码错误');
               this.imgCodeErr = true;
-              this.codeErrText = "短信验证码错误";
+              this.SMSErrText = "短信验证码错误";
               this.msgCode = "";
             }
           }).catch((err) => {
@@ -340,7 +359,7 @@
             } else {
               // this.$message.error('短信验证码错误');
               this.imgCodeErr = true;
-              this.codeErrText = "短信验证码错误";
+              this.SMSErrText = "短信验证码错误";
               this.msgCode = "";
             }
           }).catch((err) => {

src/components/forgetPassword/findPassword.less

@@ -121,12 +121,15 @@
         input:-ms-input-placeholder { /* Internet Explorer 10-11 */
           color: #c9c9c9;
         }
+        .phoneBox {
+          position: relative;
+        }
         .tips{
           display: inline-block;
           font-size: 12px;
           color: #dd0f0f;
           position: absolute;
-          top: 278px;
+          top: 42px;
         }
         .yanzm {
           position: relative;
@@ -157,7 +160,7 @@
             display: inline-block;
             vertical-align: middle;
             top: 0;
-            right: -1px;
+            right: -2px;
             cursor: pointer;
           }
           .disabled {
@@ -210,10 +213,18 @@
           color: #000000;
           letter-spacing: 0;
         }
+
+        input:focus {
+          border: 1px solid #0952DA;
+        }
+        .error {
+          border: 1px solid #FA2828;
+        }
       }
     }
   }
   .box2 {
     height: 340px;
   }
+  
 }

src/components/register/register.less

@@ -142,7 +142,7 @@
         display: inline-block;
         vertical-align: middle;
         top: 0;
-        right: -1px;
+        right: -2px;
         cursor: pointer;
       }
       .disabled {
@@ -184,4 +184,8 @@
       bottom: 108px;
     }
   }
-}
+
+  input:focus {
+    border: 1px solid #0952DA;
+  }
+}