密码

src/utils/global.js

@@ -9,3 +9,7 @@ export default
 export const REGION = {
   YI_LONG_XIAN: '仪陇',
 }
+
+export const REGEXP = {
+  PASSWORD: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{8,}$/,
+};

src/views/sunVillage_info/passWord.vue

@@ -5,14 +5,14 @@
       <div class="return_btn" @click="onClickLeft"></div>
       <div class="add_btn" @click="send">保存</div>
     </div>
-    <van-form @submit="onSubmit" ref="formData">
+    <van-form @submit="onSubmit" ref="formData" :show-error-message="true" error-message-align="right">
       <div class="list_main">
 
-        <van-field required label="旧密码" :rules="[{ required: true , message:'请输入旧密码' }]" v-model="user.oldPassword" placeholder="请输入旧密码" input-align="right" :border="false" />
+        <van-field required label="旧密码" :rules="[{ required: true , message:'' }]" v-model="user.oldPassword" placeholder="请输入旧密码" input-align="right" :border="false" />
 
-        <van-field required label="新密码" :rules="[{ required: true , message:'请输入新密码'}]" v-model="user.newPassword" placeholder="请输入新密码" input-align="right" :border="false" />
+        <van-field required label="新密码" :rules="rules.newPassword" v-model="user.newPassword" placeholder="请输入新密码" input-align="right" :border="false" />
 
-        <van-field required label="确认密码" :rules="[{ required: true, message: '请确认密码' }]" prop="email" v-model="user.confirmPassword" placeholder="请确认密码" input-align="right" :border="false" />
+        <van-field required label="确认密码" :rules="[{ required: true, message: '' }]" prop="email" v-model="user.confirmPassword" placeholder="请确认密码" input-align="right" :border="false" />
 
       </div>
 
@@ -27,11 +27,21 @@
 
 <script>
   import { updateUserPwd } from "@/api/sunVillage_info/fixedAssets";
+  import {REGEXP} from "@/utils/global";
+  import {Notify} from "vant";
   export default {
     name: "certificateList",
     data() {
       return {
         user:{},
+        rules: {
+          newPassword: [
+            { required: true , message:''},
+            { validator: (val) => { return val.length >= 8; }, message: '密码长度至少8位', },
+            { validator: (val) => { return val.length <= 20; }, message: '密码长度不能超过20位', },
+            { pattern: REGEXP.PASSWORD, message: '密码必须包括字母、数字、特殊符号!', }
+          ],
+        },
       };
     },
     created() {
@@ -46,6 +56,8 @@
           that.$notify({ type: 'warning', message: '两次输入的密码不一致！' });
           return;
         }
+        if(!this.validatePassword(this.user.newPassword))
+          return;
         updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
           that.$notify({ type: 'success', message: '修改成功！' });
           setTimeout(function(){
@@ -53,6 +65,15 @@
           },2000)
         });
       },
+      validatePassword(what) {
+        if(!(REGEXP.PASSWORD.test(what)))
+        {
+          Notify.clear();
+          Notify({ type: 'danger', message: '密码至少8个字符，必须包括字母、数字、特殊符号!' });
+          return false;
+        }
+        return true;
+      },
     },
   }
 </script>
@@ -176,7 +197,7 @@
       left: 0PX;
     }
     /deep/ .van-field__error-message{
-      display: none;
+      /*display: none;*/
     }
   }
 </style>

src/views/yinnong/password.vue

@@ -6,7 +6,7 @@
     @click-left="$router.back(-1)"
   />
   <van-cell-group style="width: 96%;margin:2%;border-radius: 6px;overflow: hidden;padding-top: 10px;padding-bottom: 10px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);">
-    <van-field type="password" v-model="user.oldPassword" placeholder="" >
+    <van-field type="password" v-model="user.oldPassword" placeholder="" @input="clearError" >
       <template #left-icon>
         <van-image
           height="20"
@@ -17,7 +17,7 @@
         <H4 style="margin-left: 5px">原密码</H4>
       </template>
     </van-field>
-    <van-field type="password" v-model="user.newPassword"  placeholder="" >
+    <van-field type="password" :error-message="validate.newPassword" v-model="user.newPassword"  placeholder="" @input="clearError" @blur="validate_newPassword">
       <template #left-icon>
         <van-image
           height="20"
@@ -28,7 +28,7 @@
         <H4 style="margin-left: 5px">新密码</H4>
       </template>
     </van-field>
-    <van-field type="password" v-model="user.confirmPassword"  placeholder="" >
+    <van-field type="password" v-model="user.confirmPassword"  placeholder="" @input="clearError">
       <template #left-icon>
         <van-image
           height="20"
@@ -49,6 +49,8 @@
 <script>
     import onlineHomeIndex from "../onlineHomeIndex";
     import {updateUserPwd} from "../../api/onlineHome/my";
+    import {REGEXP} from "@/utils/global";
+    import {Notify} from "vant";
 
     export default {
       components: {
@@ -62,10 +64,15 @@
             newPassword: undefined,
             confirmPassword: undefined
           },
+          validate: {
+            newPassword: '',
+          },
         };
       },
       methods: {
         submit() {
+          if(!this.validate_newPassword())
+            return;
           console.log(this.user)
           if(this.user.confirmPassword
             !=this.user.newPassword){
@@ -73,14 +80,19 @@
               icon: 'error', // 找到自己需要的图标
               message: '两次密码不同，请重新输入',
               duration:"1000",
-              onClose:function(){
-                this.user.oldPassword=""
-                this.user.newPassword=""
-                this.user.confirmPassword=""
+              onClose:() => {
+                if(0)
+                {
+                  this.user.oldPassword=""
+                  this.user.newPassword=""
+                  this.user.confirmPassword=""
+                }
                 return false;
               }
             })
           }else{
+            if(!this.validatePassword(this.user.newPassword))
+              return;
             updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
               response => {
                 let _this =this
@@ -95,7 +107,43 @@
               }
             );
           }
-
+        },
+        validatePassword(what) {
+          if(!(REGEXP.PASSWORD.test(what)))
+          {
+            Notify.clear();
+            Notify({ type: 'danger', message: '密码至少8个字符，必须包括字母、数字、特殊符号!' });
+            return false;
+          }
+          return true;
+        },
+        validate_newPassword() {
+          let password = this.user.newPassword;
+          if(!password)
+          {
+            this.validate.newPassword = '';
+            return false;
+          }
+          if(password.length < 8)
+          {
+            this.validate.newPassword = '密码长度至少8位';
+            return false;
+          }
+          if(password.length > 20)
+          {
+            this.validate.newPassword = '密码长度不能超过20位';
+            return false;
+          }
+          if(!(REGEXP.PASSWORD.test(password)))
+          {
+            this.validate.newPassword = '密码必须包括字母、数字、特殊符号!';
+            return false;
+          }
+          this.validate.newPassword = '';
+          return true;
+        },
+        clearError() {
+          this.validate.newPassword = '';
         },
       }
     }