Browse Source

实现更改密码时,不允许输入空格

liyangbin 2 years ago
parent
commit
ad96a2c635
5 changed files with 92 additions and 17 deletions
  1. 15 3
      components/LoginBar.vue
  2. 1 4
      components/RegisterBar.vue
  3. 16 4
      components/UserManage.vue
  4. 24 3
      pages/converter.vue
  5. 36 3
      pages/resetPsw.vue

+ 15 - 3
components/LoginBar.vue

@@ -51,6 +51,7 @@ export default {
       this.form.username = localStorage.getItem('username')
       this.form.password = localStorage.getItem('password')
     }
+    // this.forgetForm.account = this.form.username
   },
   methods: {
     ...mapActions(['login']),
@@ -93,6 +94,7 @@ export default {
     handlerForgetPsw() {
       this.interfaceStatus = 'forgetPsw'
       this.handleGetVcodeImage()
+      this.forgetForm.account = this.form.username
     },
     // 手机号码发送验证码
     handlePostCode() {
@@ -224,7 +226,17 @@ export default {
     //登录错误提示
     changeLoginTip(){
       this.loginError = false
-    }
+    },
+    //不允许输入空格
+    keydown(event){
+	    if(event.keyCode == 32){
+		    event.returnValue = false
+        this.resetPswTip = '请勿输入空格'
+        }
+    },
+    changeErr(){
+      this.resetPswTip = ''
+    },
   }
 }
 
@@ -316,10 +328,10 @@ export default {
           <br />
           <p class="mb-5px">设置新密码</p>
           <div class="getbackpwd_input_pwd_span w-20px h-20px absolute top-185px left-34px"></div>
-          <input v-model="resetForm.newPassword" class="getbackpwd_input_pwd input_newpwd" type="password" value="" placeholder="新密码(6-16个字符,区分大小写)">
+          <input v-model="resetForm.newPassword" class="getbackpwd_input_pwd input_newpwd" type="password" value="" placeholder="新密码(6-16个字符,区分大小写)" @input="changeErr" @keydown="keydown($event)" >
           <br />
           <div class="getbackpwd_input_pwd_span w-20px h-20px absolute top-245px left-34px"></div>
-          <input v-model="resetForm.confirm_newPassword" class="getbackpwd_input_pwd input_newpwd_conform" type="password" placeholder="确认新密码">
+          <input v-model="resetForm.confirm_newPassword" class="getbackpwd_input_pwd input_newpwd_conform" type="password" placeholder="确认新密码" @input="changeErr" @keydown="keydown($event)">
           <br />
           <div v-if="resetPswTip !== ''" class="error-mess">
             <span id="error-message error-tip">{{resetPswTip}}</span>

+ 1 - 4
components/RegisterBar.vue

@@ -118,9 +118,6 @@ export default {
         this.errMsg = '请勿输入空格'
         }
     },
-    changeErrMsg(){
-      this.errMsg = ''
-    }
   }
 }
 </script>
@@ -132,7 +129,7 @@ export default {
     </div>
     <div class="login_content relative">
       <div class="login_input_user_span w-20px h-20px absolute top-30px left-34px"></div>
-      <input id="signup_account" v-model="form.username" class="login_input_user" type="text" placeholder="手机号/邮箱" @blur="handlerUsernameBlur" @input="changeErrMsg">
+      <input id="signup_account" v-model="form.username" class="login_input_user" type="text" placeholder="手机号/邮箱" @blur="handlerUsernameBlur" @input="changeErr">
       <br />
       <div class="login_input_password_span w-20px h-20px absolute top-90px left-34px"></div>
       <input id="signup_pwd1" v-model="form.password" class="login_input_password" type="password" placeholder="密码(6-16个字符,区分大小写)"

+ 16 - 4
components/UserManage.vue

@@ -26,11 +26,11 @@
         <p>修改密码</p>
       </div>
       <div class="login_content changepwd-content">
-        <input v-model="form.password" class="login_input_password" type="password" placeholder="原始密码">
+        <input v-model="form.password" class="login_input_password" type="password" placeholder="原始密码" @input="changeErr">
         <br/>
-        <input  v-model="form.newPassword"  class="login_input_password new" type="password" placeholder="新密码(6-16个字符,区分大小写)">
+        <input  v-model="form.newPassword"  class="login_input_password new" type="password" placeholder="新密码(6-16个字符,区分大小写)" @keydown="keydown($event)" @input="changeErr">
         <br/>
-        <input  v-model="form.newPasswordConfirm"  class="login_input_password confirm" type="password" placeholder="确认新密码">
+        <input  v-model="form.newPasswordConfirm"  class="login_input_password confirm" type="password" placeholder="确认新密码" @keydown="keydown($event)" @input="changeErr">
         <br/>
         <div v-show="isRight">
           <div class="error-mess error-mess-signup mb-5px" >
@@ -127,7 +127,19 @@ export default {
       this.form.password = ''
       this.form.newPassword = ''
       this.form.newPasswordConfirm = ''
-    }
+    },
+    //不允许输入空格
+    keydown(event){
+	    if(event.keyCode == 32){
+		    event.returnValue = false
+        this.errMsg = '请勿输入空格'
+        this.isRight = true
+        }
+    },
+    changeErr(){
+      this.errMsg = ''
+      this.isRight = false
+    },
   },
   props:["dialogVisiable"],
   mounted() {

+ 24 - 3
pages/converter.vue

@@ -121,9 +121,14 @@
                           <div class="add-file" :class="{'add-file-left':(fileList.length > 0)}">
                             {{ fileList.length > 0 ? '添加文件' : '' }}
                           </div>
+                          <!-- 未登录时 -->
+                          <input id="fileinput-explorer" ref="file" name="file" accept=".pdf" title="上传文件" type="file" multiple=""
+                          class="absolute top-0 right-0 p-0 m-0 min-w-[100%] h-[100%] w-90px text-right opacity-0 bg-none bg-repeat bg-scroll block outline-none border-0 cursor-not-allowed"
+                          :disabled='true' v-if = " showInputDisable "/>
+                          <!-- 登录 -->
                           <input id="fileinput-explorer" ref="file" name="file" accept=".pdf" title="上传文件" type="file" multiple=""
                           class="absolute top-0 right-0 p-0 m-0 min-w-[100%] h-[100%] w-90px text-right opacity-0 bg-none bg-repeat bg-scroll block outline-none border-0 cursor-pointer"
-                          @change="addFile($event)" @click="handlSubmit($event, '')"/>
+                          @change="addFile($event)" @click="handlSubmit($event, '')" v-if = " !showInputDisable "/>
                         </div>
                         <div v-show="fileList.length > 0 && changeFileFlag" class="inline-block ml-30px bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer text-[#ff4f4f] leading-normal hover:bg-[#ff4f4f] hover:text-white" 
                           @click="deleteAllFile">清空</div>
@@ -298,7 +303,7 @@
         </div>
       </div>
       <client-only>
-        <el-dialog :visible.sync="visiable" :close-on-click-modal="true" :close-on-press-escape="false" width="480px" append-to-body center>
+        <el-dialog :visible.sync="visiable" :close-on-click-modal="true" :close-on-press-escape="false" width="480px" append-to-body center top="25vh">
           <div class="changepwd-tittle">
             <p class="text-20px text-center text-$btn-color-primary">提示</p>
           </div>
@@ -338,7 +343,8 @@ export default {
             changeSucesssNumTotal: 0,
             changeSucesssFileList: [],
             visiable: false,
-            noMia:false
+            noMia:false,
+            showInputDisable:false
         };
     },
     middleware: "user",
@@ -359,6 +365,7 @@ export default {
     },
     computed: {
         ...mapState([
+            'token',
             "userInfo"
         ]),
         // 所需券数
@@ -397,6 +404,7 @@ export default {
             if (!this.$store.state.token) {
               event.preventDefault();
               this.visiable = true;
+              this.showInputDisable = true
               return;
             }
             if (type === "buy") {
@@ -410,11 +418,13 @@ export default {
         },
         login() {
             this.visiable = false;
+            this.showInputDisable = false;
             this.$store.commit("OPEN_LOGIN", true);
             this.$store.commit("SET_INTERFACE", "login");
         },
         register() {
             this.visiable = false;
+            this.showInputDisable = false;
             this.$store.commit("OPEN_LOGIN", true);
             this.$store.commit("SET_INTERFACE", "register");
         },
@@ -772,6 +782,13 @@ export default {
             });
         }
     },
+    watch: {
+      token(newValue){
+        if(newValue){
+          this.showInputDisable = false;
+        }
+      }
+    }
 }
 </script>
 
@@ -779,6 +796,10 @@ export default {
 ::v-deep body {
   min-width: 1200px !important;
 }
+::v-deep .el-dialog {
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgb(0, 0 ,0 ,.5)
+}
 .page-converter {
   .date-tips {
     background: linear-gradient(0deg, #fff2f6, #fff2f6),

+ 36 - 3
pages/resetPsw.vue

@@ -46,6 +46,8 @@
                     v-model="newPassword"
                     type="password"
                     class="form-control h-40px w-full py-6px px-12px text-[14px] leading-[1.42857143] text-[#555] bg-[#fff] border border-solid border-gray-[#ccc] m-0"
+                    @input="changeErr" 
+                    @keydown="keydown($event)" 
                   />
                 </div>
 
@@ -60,9 +62,13 @@
                     v-model="confirm_newPassword"
                     type="password"
                     class="form-control h-40px w-full py-6px px-12px text-[14px] leading-[1.42857143] text-[#555] bg-[#fff] border border-solid border-gray-[#ccc] m-0"
+                    @input="changeErr" 
+                    @keydown="keydown($event)"
                   />
                 </div>
-
+                <div v-show="errMsg !== ''" class="error-mess error-mess-signup mb-5px">
+                  <span id="error-message error-tip ">{{errMsg}}</span>
+                </div>
                 <button
                   class="btn btn-block bg-[#fdc656] text-[#fff] h-50px w-full py-6px px-12px mb-0 text-[14px] m-0 font-normal leading-[1.42857143] text-center whitespace-nowrap align-middle cursor-pointer border border-solid border-transparent"
                   type="submit"
@@ -192,7 +198,8 @@ export default {
     return {
       confirm_newPassword: '',
       newPassword: '',
-      showError: false
+      showError: false,
+      errMsg: ''
     }
   },
   methods: {
@@ -213,7 +220,16 @@ export default {
           this.$router.push('/')
         }
       })
-    }
+    },
+    changeErr(){
+      this.errMsg = ''
+    },
+    keydown(event){
+	    if(event.keyCode == 32){
+		    event.returnValue = false
+        this.errMsg = '请勿输入空格'
+        }
+    },
   }
 }
 </script>
@@ -289,4 +305,21 @@ export default {
 .qq:before {
   content: url(~/assets/images/password/ic_foot_qq_normal-e67510e549266f75e77757d308306b01185370fffc5a105438d91601b6a486ec.png);
 }
+.error-mess {
+    position: relative;
+    font-size: 14px;
+    text-align: center;
+  }
+  .error-mess-signup {
+    position: initial;
+    clear: both;
+    margin-top: 15px;
+  }
+.error-mess span{
+      display: inline-block;
+      background: #808080;
+      color: rgb(255, 255, 255);
+      padding: 5px 15px;
+      border-radius: 4px;
+    }
 </style>