docs：密码强度

819527061@qq.com

2024-06-11 9b85e466d4ce21bb704c01ac3729737f3146bdc8

 pages/login/resetPassword/resetPassword.vue

@@ -5,21 +5,53 @@
         :rules="rules"
         ref="uForm"
         label-width="80px">
         <u-form-item prop="password"
      <template v-if="isShowPassword">
           <u-form-item prop="originalPassword"
            label="密码"
            required
            borderBottom>
            <u-input v-if='inputType==="password"'
               v-model="modelForm.password"
               v-model="modelForm.originalPassword"
               border="surround"
               placeholder="请输入密码(仅支持数字字母下划线)"
               :type='inputType' />
            <u-input v-else
               v-model="modelForm.password"
               v-model="modelForm.originalPassword"
               border="surround"
               placeholder="请输入密码(仅支持数字字母下划线)"
               :type='inputType' />
         </u-form-item>
      </template>
      <u-form-item prop="password"
                   label="密码"
                   required
                   borderBottom>
        <u-input v-if='inputType==="password"'
                 v-model="modelForm.password"
                 border="surround"
                 placeholder="请输入密码(仅支持数字字母下划线)"
                 :type='inputType' />
        <u-input v-else
                 v-model="modelForm.password"
                 border="surround"
                 placeholder="请输入密码(仅支持数字字母下划线)"
                 :type='inputType' />
      </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="secondPassword"
            label="二次确认"
            required
@@ -62,63 +94,146 @@
<script>
   export default {
      data() {
      const validatePass = (rule, value, callback) => {
        if (this.modelForm.password !== "") {
          if (value !== this.modelForm.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 {
        isShowPassword:true,
        level:[],
            userInfo: {},
            checkboxValue: [],
            inputType: 'password',
            isFocus: false,
            modelForm: {
          originalPassword:'',  //原密码
               password: '',
               secondPassword: ''
               secondPassword: '',
          username:'',
          userId:''
            },
            processLoading: false,
            rules: {
               password: [{
                     type: 'string',
                     required: true,
                     message: '请填写密码',
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 2,
                     max: 10,
                     message: '密码长度应不小于2位,不大于10位  ',
                     trigger: ['blur', 'change']
                  },
                  {
                     pattern: /^[a-zA-Z0-9_]+$/,
                     message: '请输入正确格式的密码',
                     trigger: ['blur', 'change']
                  }
               ],
               secondPassword: [{
                     type: 'string',
                     required: true,
                     message: '请填写二次密码',
                     trigger: ['blur', 'change']
                  },
                  {
                     min: 2,
                     max: 10,
                     message: '密码长度应不小于2,不大于10',
                     trigger: ['blur', 'change']
                  }
               ]
          originalPassword: [{
            type: 'string',
            required: this.isShowPassword,
            message: '请填写密码',
            trigger: ['blur', 'change']
          }
          ],
          password:[{
            required: true,
            validator: checkPassword,
            trigger: 'change'
          }],
          secondPassword: [{
            required: true,
            validator: validatePass,
            trigger: "blur"
          }]
            }
         }
      },
      computed: {
         roleType() {
            return uni.getStorageSync('roleType')
         }
         },
      userId() {
        if(uni.getStorageSync('userId')) {
          this.modelForm.userId = uni.getStorageSync('userId')
        }
        return uni.getStorageSync('userId')
      }
      },
      onLoad(params) {
         if (this.roleType === 3) {
            this.userInfo = JSON.parse(params.userInfo)
         } else {
            this.getUserInfo(params.phone, params.idCard)
            const query = JSON.parse(params.userInfo)
            this.getUserInfo( query.phone, query.idCard)
         }

      if(params.userInfo) {
        this.modelForm.username = JSON.parse(params.userInfo).username   //username
        this.modelForm.userId = JSON.parse(params.userInfo).userId   //userId
        if(JSON.parse(params.userInfo).isShowPassword) {
          this.isShowPassword = false
        }else {
          this.isShowPassword = true
        }
      }else {
        this.isShowPassword = true
      }
      },
      onReady() {
         this.$refs.uForm.setRules(this.rules)
@@ -139,12 +254,13 @@
            this.isFocus = true
         },
         process() {
            if (this.modelForm.password !== this.modelForm.secondPassword) return uni.$u.toast('密码不一致,请检查')
            this.userInfo.password = this.modelForm.secondPassword;
            this.processLoading = true;
            if(!this.level.includes('middle') &&  !this.level.includes('high')) {
          return this.$u.toast('密码强度太弱')
        }
            this.$refs.uForm.validate().then(res => {
               this.$reqAllJson('appUpdateById', this
                  .userInfo, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {
          this.processLoading = true;
          console.log(this.modelForm,'this.modelForm===参数')
               this.$reqAllJson('appUpdateById', this.modelForm, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {
                  this.processLoading = false;
                  if (res.code === 0) {
                     this.$u.toast('修改成功,即将回到首页')
@@ -156,9 +272,11 @@
                  } else {
                     this.$u.toast(res.msg ? res.msg : '修改失败')
                  }
               })
            }).catch(errors => {
               uni.$u.toast('校验失败')
               }).catch(e => {
            // uni.$u.toast('校验失败')
          }).finally(() => {
            this.processLoading = false;
          })
            })
         }
      }
@@ -174,5 +292,44 @@
      .process-button {
         margin-top: vww(20);
      }
    .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>
</style>