docs：密码强度

819527061@qq.com

2024-06-11 9b85e466d4ce21bb704c01ac3729737f3146bdc8

 pages/login/resetPassword/resetPassword.vue

@@ -5,23 +5,67 @@
         :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-model="modelForm.password"
            <u-input v-if='inputType==="password"'
               v-model="modelForm.originalPassword"
               border="surround"
               placeholder="请输入密码"
               type='password'></u--input>
               placeholder="请输入密码(仅支持数字字母下划线)"
               :type='inputType' />
            <u-input v-else
               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
            borderBottom>
            <u--input v-model="modelForm.secondPassword"
            <u-input v-if='inputType==="password"'
               v-model="modelForm.secondPassword"
               border="surround"
               placeholder="请再次输入密码"
               type='password'></u--input>
               placeholder="请再次输入密码(仅支持数字字母下划线)"
               type='password' />
            <u-input v-else
               v-model="modelForm.secondPassword"
               border="surround"
               placeholder="请再次输入密码(仅支持数字字母下划线)"
               type='text' />
         </u-form-item>
         <u-form-item>
            <view class="process-button">
@@ -31,6 +75,18 @@
                  @click.stop="process"></u-button>
            </view>
         </u-form-item>
         <u-form-item prop="checkboxValue">
            <u-checkbox-group v-model="checkboxValue"
               @change="checkChange">
               <u-checkbox label="显示密码"
                  name="显示"
                  iconSize="32"
                  label-size="32"
                  size="40"
                  shape="circle">
               </u-checkbox>
            </u-checkbox-group>
         </u-form-item>
      </u-form>
   </view>
</template>
@@ -38,43 +94,173 @@
<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']
               },
               secondPassword: {
                  type: 'string',
                  required: true,
                  message: '请填写二次密码',
                  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) {
         this.userInfo = JSON.parse(params.userInfo)
         if (this.roleType === 3) {
            this.userInfo = JSON.parse(params.userInfo)
         } else {
            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)
      },
      methods: {
         getUserInfo(phone, idCard) {
            this.$reqGet('phoneAndCard', { phone, idCard }).then(res => {
               if (res.code === 0) {
                  this.userInfo = res.data
               } else {
                  uni.$u.toast('加载失败')
               }
            })

         },
         checkChange(name) {
            this.inputType = name.length === 0 ? 'password' : ''
            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('修改成功,即将回到首页')
@@ -86,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;
          })
            })
         }
      }
@@ -104,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>