Vue implementa verificación de seguridad de contraseña

I. Introducción

Al utilizar el-form, encontrará cambios de contraseña. En este momento, debe verificar la seguridad de la contraseña. Este artículo utiliza principalmente reglas regulares para verificar la seguridad de la contraseña.

2. Demanda

Establezca los requisitos de contraseña: 8 ~ 16 caracteres, números, letras y símbolos. Elija uno de los tres como modo débil, elija dos como modo medio, elija tres como modo fuerte

3. Códigos específicos

parte html

<el-form ref="psdform" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="新密码:" prop="newPassword">
        <el-input
          :type="newPsdtype"
          v-model="form.newPassword"
          placeholder="8-16位密码，区分大小写"
        >
          <span slot="suffix" class="show_pwd" @click="showPwd">
            <svg-icon
              :icon-class="newPsdtype == 'password' ? 'eye' : 'eye-open'"
            />
          </span>
        </el-input>

        <div class="intensity">
          <span class="psdText">密码强度</span>
          <span
            class="line"
            :class="[level.includes('low') ? 'low' : '']"
          ></span>
          <span
            class="line"
            :class="[level.includes('middle') ? 'middle' : '']"
          ></span>
          <span
            class="line"
            :class="[level.includes('high') ? 'high' : '']"
          ></span>
          <div class="warningtext">
            密码应由8-16位数字、字母、符号组成。请不要使用容易被猜到的密码
          </div>
        </div>
      </el-form-item>
      <el-form-item label="确认密码:" prop="confirmPassword">
        <el-input
          :type="confirmPsdtype"
          v-model="form.confirmPassword"
          placeholder="确认密码"
        >
          <span slot="suffix" class="show_pwd" @click="showconfirmPwd">
            <svg-icon
              :icon-class="confirmPsdtype == 'password' ? 'eye' : 'eye-open'"
            /> </span
        ></el-input>
      </el-form-item>
<el-form>

parte js

data() {
    
    
    return {
    
    
      form: {
    
    
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
    
    
        newPassword: [
          {
    
     required: true, validator: this.checkPassword, trigger: 'change' }
        ],
        confirmPassword: [
          {
    
    
            required: true,
            validator: this.checkConfirmPassword,
            trigger: 'blur'
          }
        ],
      },
      level: []
    }
  },
  methods: {
    
    
    //点击小眼睛
    showPwd() {
    
    
      if (this.newPsdtype === 'password') {
    
    
        this.newPsdtype = ''
      } else {
    
    
        this.newPsdtype = 'password'
      }
    },
    //点击小眼睛
    showconfirmPwd() {
    
    
      if (this.confirmPsdtype === 'password') {
    
    
        this.confirmPsdtype = ''
      } else {
    
    
        this.confirmPsdtype = 'password'
      }
    },
    // 校验密码
    checkPassword(rule, value, callback) {
    
    
      this.level = []
      if (!value) {
    
    
        return callback('密码不能为空')
      }
      if (value.length < 8) {
    
    
        return callback('密码不少于8位')
      }
      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')
      } else if (regex2.test(value)) {
    
    
        this.level.push('low')
      } else if (regex3.test(value)) {
    
    
        this.level.push('low')
      } else if (/^[A-Za-z\d]+$/.test(value)) {
    
    
        this.level.push('low')
        this.level.push('middle')
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、\d]+$/.test(
          value
        )
      ) {
    
    
        this.level.push('low')
        this.level.push('middle')
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z]+$/.test(
          value
        )
      ) {
    
    
        this.level.push('low')
        this.level.push('middle')
      } else if (
        /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、A-Za-z\d]+$/.test(
          value
        )
      ) {
    
    
        this.level.push('low')
        this.level.push('middle')
        this.level.push('high')
      }
      return callback()
    },
    // 确认密码
    checkConfirmPassword(rule, value, callback) {
    
    
      if (!value) {
    
    
        return callback('请输入确认密码')
      }
      if (value != this.form.newPassword) {
    
    
        return callback('两次密码输入不一致，请重新输入')
      }
    },

parte css

.show_pwd {
    
    
  cursor: pointer;
  user-select: none;
  padding-right: 5px;
}
.intensity {
    
    
  .psdText {
    
    
    font-size: 14px;
    margin-right: 10px;
  }
  .line {
    
    
    display: inline-block;
    width: 48px;
    height: 4px;
    background: #d8d8d8;
    border-radius: 3px;
    margin-right: 8px;
    &.low {
    
    
      background: #f4664a;
    }
    &.middle {
    
    
      background: #ffb700;
    }
    &.high {
    
    
      background: #2cbb79;
    }
  }
  .level {
    
    
    margin: 0 16px 0 8px;
  }
  .warningtext {
    
    
    color: #5a5a5a;
    font-size: 12px;
    margin-top: 5px;
  }
}

4. Date cuenta del efecto

El código anterior utiliza tres colores para determinar la seguridad de la contraseña y el efecto específico es el siguiente

5. Finalizando

Las imágenes de arriba demuestran el juicio de seguridad de la contraseña en diferentes circunstancias. No demuestran la verificación de longitud, pero la función se ha implementado y usted mismo puede verificarla.