注册页面添加错误提示

src/components/forgetPassword/FindPassword.vue

@@ -211,7 +211,7 @@
               type: 'warning'
             });*/
             this.imgCodeErr = true;
-            this.phoneErrText = "手机格式不正确";
+            this.phoneErrText = "手机格式有误";
             this.phone = "";
           }else{//验证手机号是否注册
             this.imgCodeErr = false;

src/components/register/Register.vue

@@ -18,27 +18,35 @@
                 <form>
                     <div class="main" v-show="flag">
                         <!-- <p>手机号</p> -->
-                        <input type="tel" name="" v-model="phone" maxlength="11" @input="handleTelInput"
+						<div class="phoneBox">
+							<input type="tel" :class="[{ 'error': phoneErrText}]" name="" v-model="phone" maxlength="11" @input="handleTelInput"
                                @blur="checkPhone" placeholder="请输入用户名或手机号">
+							<span class="tips" v-show="phoneErrText">{{phoneErrText}}</span>
+						</div>
+                        <div class="phoneBox">
+                        	<input type="password" :class="[{ 'error': pswErrText}]" name="" v-model="psw" minlength="6" maxlength="16" @blur="checkPsw" placeholder="请输入密码">
+							<span class="tips" v-show="pswErrText">{{pswErrText}}</span>
+						</div>
                         
                         <!-- <p>密码</p> -->
-                        <input type="password" name="" v-model="psw" minlength="6" maxlength="16" @blur="checkPsw" placeholder="请输入密码">
                         
                         <div class="yanzm">
                             <!-- <p>图形验证码</p> -->
-                            <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">
                             <img :src='"data:image/png;base64,"+imgCode' @click="refreshCode">
+							<span class="tips" v-show="imgErrText">{{imgErrText}}</span>
                         </div>
                         <div class="yanzm">
                             <!-- <p>短信验证码</p> -->
                             <!-- <input type="text" name="" v-model="msgCode" maxlength="6" @input="handleMsg"> -->
-                            <input type="text" name="" v-model="msgCode" maxlength="6" @blur="cheeckMsgCode">
+                            <input type="text" :class="[{ 'error': SMSErrText}]" name="" v-model="msgCode" maxlength="6" @blur="cheeckMsgCode">
                             <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">图形验证码错误</span> -->
-                        <span class="tips" v-show="imgCodeErr">{{codeErrText}}</span>
+                        <!-- <span class="tips" v-show="imgCodeErr">{{codeErrText}}</span> -->
 
                         <div class="next" v-if="changCor">下一步</div>
                         <div class="next nextCor" @click="toNext" v-else>下一步</div>
@@ -46,12 +54,21 @@
 
                     <div class="main"  v-show="!flag">
                         <!-- <p>联系邮箱</p> -->
-                        <input type="email" name="" v-model="email" @blur="checkEmail"  placeholder="请输入联系邮箱" autocomplete="off">
+						<div class="phoneBox">
+                        	<input type="email" :class="[{ 'error': emailErrText}]" name="" v-model="email" @blur="checkEmail"  placeholder="请输入联系邮箱" autocomplete="off">
+							<span class="tips" v-show="emailErrText">{{emailErrText}}</span>
+						</div>
                         <!-- <p>机构名称</p> -->
-                        <input type="text" name="" v-model="agencyName" maxlength="20" placeholder="请输入机构名称" autocomplete="off">
+						<div class="phoneBox">
+                        	<input type="text" :class="[{ 'error': agencyErrText}]" name="" v-model="agencyName" maxlength="20" placeholder="请输入机构名称" autocomplete="off">
+							<span class="tips" v-show="agencyErrText">{{agencyErrText}}</span>
+						</div>
+						<div class="phoneBox">
+                        	<input type="text" :class="[{ 'error': contactErrText}]" name="" v-model="contact" maxlength="10" @blur="handleContInput" placeholder="请输入联系人" autocomplete="off">
+							<span class="tips" v-show="contactErrText">{{contactErrText}}</span>
+						</div>
                         <!-- <p>联系人</p> -->
                         <!-- <input type="text" name="" v-model="contact" @input="handleContInput"> -->
-                        <input type="text" name="" v-model="contact" maxlength="10" @blur="handleContInput" placeholder="请输入联系人" autocomplete="off">
                         <div class="next" v-if="submitCor">立即注册</div>
                         <div class="next nextCor" @click="submit" v-else>立即注册</div>
                     </div>
@@ -95,7 +112,14 @@
         msgCodeTimer:null,//短信验证码
         msgCodeTime:180,
         codeErrText:'',
-        phoneRg:null
+		phoneRg:null, 
+		phoneErrText: '', // 手机号错误提示
+		pswErrText: '', //密码错误提示
+		imgErrText: '', //图像码错误信息
+		SMSErrText: '', //短信验证码错误信息
+		emailErrText:'', //邮箱错误信息提示
+		agencyErrText: '', //机构错误信息提示
+		contactErrText: '' //联系人错误信息提示
       }
     },
     created() {
@@ -134,9 +158,10 @@
             type: 'warning'
           });*/
           this.imgCodeErr = true;
-          this.codeErrText = "联系人只能输入中文";
+          this.contactErrText = "联系人只能输入中文";
           this.contact = '';
         }else{
+		this.contactErrText = "";
           this.imgCodeErr = false;
         }
       },
@@ -185,8 +210,9 @@
           api.vertifyImgCode(params).then((res) => {
             if (+res.data.code != 0) {//验证失败
               this.imgCodeErr = true
-              this.codeErrText = "图形验证码错误";
+              this.imgErrText = "图形验证码错误";
             } else {
+			  this.imgErrText = "";
               this.imgCodeErr = false
             }
           }).catch((err) => {
@@ -200,12 +226,12 @@
         const reg = utils.phoneReg;
         if(this.phone.trim()){
           if (!reg.test(this.phone)) {
-            this.$message({
-              message: '手机格式不正确',
-              type: 'warning'
-            });
-           /* this.imgCodeErr = true;
-            this.codeErrText = "手机格式不正确";*/
+            // this.$message({
+            //   message: '手机格式不正确',
+            //   type: 'warning'
+			// });
+			this.phoneErrText = '手机格式有误'
+          
             this.phone = "";
             this.phoneRg = 1;
           }else{
@@ -213,7 +239,7 @@
             // this.imgCodeErr = false;
             api.checkTel(this.phone).then((res)=>{
               if(+res.data.code == 0){
-                
+                this.phoneErrText = ''
               }else{
                 this.$message({
                   message: res.data.msg,
@@ -234,17 +260,17 @@
         //手机号、密码、联系人、图形验证码不为空且符合规则且图形验证码正确--shenq10.26
         if(!this.phone.trim() && !this.phoneRg){
           this.imgCodeErr = true;
-          this.codeErrText = "手机号不能为空";
+          this.phoneErrText = "手机号不能为空";
           /*this.$message({
             message: '手机号不能为空',
             type: 'warning'
           });*/
         }else if(!this.psw.trim()){
           this.imgCodeErr = true;
-          this.codeErrText = "密码不能为空";
+          this.pswErrText = "密码不能为空";
         }else if(!this.picCode.trim()){
           this.imgCodeErr = true;
-          this.codeErrText = "图形验证码不能为空";
+          this.imgErrText = "图形验证码不能为空";
         }else{//调请求接口
           this.imgCodeErr = false;
           const params = {
@@ -308,15 +334,17 @@
         if (psw) {
           if (psw.trim().length < 6 || psw.trim().length > 16) {
             this.imgCodeErr = true;
-            this.codeErrText = "密码长度为6-16位";
+            this.pswErrText = "密码长度为6-16位";
             this.psw = "";
           }
           else if (!pswlReg.test(psw)) {
             this.imgCodeErr = true;
-            this.codeErrText = "密码过于简单";
+            this.pswErrText = "密码过于简单";
             this.psw = "";
           }else{
-            this.imgCodeErr = false;
+			this.pswErrText = "";
+			this.imgCodeErr = false;
+			console.log()
           }
         }
 
@@ -336,7 +364,7 @@
           } else {
             // this.$message.error('短信验证码错误');
             this.imgCodeErr = true;
-            this.codeErrText = "短信验证码错误";
+            this.SMSErrText = "短信验证码错误";
             this.msgCode = "";
           }
         }).catch((err) => {
@@ -357,9 +385,10 @@
           //   });
 
             this.imgCodeErr = true;
-            this.codeErrText = "邮箱格式不正确";
+            this.emailErrText = "邮箱格式不正确";
             this.email = "";
           }else{
+			this.emailErrText = "";
             this.imgCodeErr = false;
           }
         }

src/components/register/register.less

@@ -70,6 +70,7 @@
     border-bottom: 1px dashed #9c9c9c;
     font-size: 12px;
     margin-bottom: 10px;
+    
     .plan {
       display: inline-block;
       width: 149px;
@@ -96,6 +97,9 @@
   form {
     width: 286px;
     margin: auto;
+    .phoneBox {
+      position: relative;
+    }
     input {
       outline: none;
       width: 256px;
@@ -181,11 +185,14 @@
       color: #dd0f0f;
       // margin-top: 4px;
       position: absolute;
-      bottom: 108px;
+      top: 44px;
     }
   }
 
   input:focus {
     border: 1px solid #0952DA;
   }
+  .error {
+    border: 1px solid #FA2828;
+  }
 }