feture:密码强制修改及密码强度限制

819527061@qq.com

2024-06-07 cfe04910a5b70d220dd1e6ac9b84328112c76808

 pages/register/register.vue

@@ -61,6 +61,21 @@
                  password
                  clearable></u--input>
            </u-form-item>
        <view class="intensity">
          <view class="psdText">密码强度</view>
          <view
              class="line"
              :class="[level.includes('low') ? 'low' : '']"></view>
          <view
              class="line"
              :class="[level.includes('middle') ? 'middle' : '']"></view>
          <view
              class="line"
              :class="[level.includes('high') ? 'high' : '']"></view>
          <div class="warningtext">
            密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
          </div>
        </view>
            <u-form-item prop="confirmPassword"
               label="确认密码"
               labelWidth="20%"
@@ -69,8 +84,7 @@
               <u--input v-model="registerFormModel.confirmPassword"
                  placeholder="请输入内容"
                  password
                  clearable
                  @blur="jiaoYanPassword"></u--input>
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="carNo"
               label="车牌号"
@@ -241,7 +255,83 @@
         }
      },
      data() {
      const validatePass = (rule, value, callback) => {
        if (this.registerFormModel.confirmPassword !== "") {
          if (value !== this.registerFormModel.password) {
            callback(new Error("两次输入密码不一致!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      const checkPassword = (rule, value, callback) => {
        // let roles = this.$store.getters.roles;//当前用户角色id
        // let passL = 8;
        // if (roles.concat(1)){
        //   passL = 10
        // }
        let passL = 8;
        this.level = []
        if(!value) {
          return callback('密码不能为空')
        }
        if(value.length < passL) {
          return callback(`密码不能少于${passL}位`)
        }
        if(value.length > 16) {
          return callback('密码不能大于16位')
        }
        //校验是数字
        const regex1 = /^\d+$/
        // 校验字母
        const regex2 = /^[A-Za-z]+$/
        // 校验符号
        const regex3 =
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]+$/
        if(regex1.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(regex2.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(regex3.test(value)) {
          this.level.push('low')
          return callback('密码强度过低')
        }else if(/^[A-Za-z\d]+$/.test(value)) {
          this.level.push('low')
          this.level.push('middle')
          return callback()
        }else if(
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          return callback()
        }else if(
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          return callback()
        } else if (
            /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
                value
            )
        ) {
          this.level.push('low')
          this.level.push('middle')
          this.level.push('high')
        }
        return callback()
      };
         return {
        level:[],  //密码强度数组
            // 车牌号键盘控制
            carNumShow: false,
            keyValue: '',
@@ -321,22 +411,15 @@
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '长度在6-12个字符之间'
              validator: checkPassword,
              trigger: 'change'
                  }
               ],
               confirmPassword: [{
                     required: true,
                     message: '请设置初始密码',
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 6,
                     max: 12,
                     message: '长度在6-12个字符之间'
                  }
               ],
            validator: validatePass,
            trigger: "blur"
          }],
               carNo: [{
                     type: 'string',
                     required: true,
@@ -438,7 +521,6 @@
      methods: {
         ...mapMutations(['changeisUploadimg']),
         registerClick() {
            if (this.registerFormModel.password == this.registerFormModel.confirmPassword) {
               this.$refs.regesterFormRef
                  .validate()
                  .then(res => {
@@ -469,9 +551,6 @@
                     console.log('err', err);
                     this.$u.toast('请规范输入内容');
                  });
            } else {
               this.$u.toast('两次密码不一致');
            }
         },
         // 单选框事件
         groupChange(e) {},
@@ -485,11 +564,6 @@
            ) {
               this.$refs.regesterFormRef.clearValidate();
               this.beforeChangeValue = e;
            }
         },
         jiaoYanPassword() {
            if (this.registerFormModel.password != this.registerFormModel.confirmPassword) {
               this.$u.toast('两次密码不一致');
            }
         },
         // 上传图片方法
@@ -618,4 +692,43 @@
         }
      }
   }
  .intensity {
    width: 100%;
    margin-top: 10rpx;
    .psdText {
      font-size: 14px;
      margin-right: 10px;
    }

    .line {
      display: inline-block;
      width: 70rpx;
      height: 8rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
      margin-right: 16rpx;

      &.low {
        background: #f4664a;
      }

      &.middle {
        background: #ffb700;
      }

      &.high {
        background: #2cbb79;
      }
    }

    .level {
      margin: 0 32rpx 0 16rpx;
    }

    .warningtext {
      color: #5a5a5a;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
</style>