VUE 密碼驗證與提示

1. 概述

1.1 說明

　　vue項目中，為了較為明了的讓用戶看到所輸入的密碼信息的長度與復雜度是否滿足要求，開發一個組件來滿足此需求(當密碼輸入時進行密碼驗證操作，當密碼的長度在8到24位之間，密碼中包含數字/小寫字母/大寫字母/特殊字符中的三項或三項以上則位正確)。

1.2 條件與思路

　　1.密碼框得到焦點顯示提示信息

　　2.驗證密碼長度在8到24位之間

　　3.驗證密碼復雜度(數字/小寫字母/大寫字母/特殊字符三項或三項以上)

　　4.密碼框失去焦點隱藏提示信息

 2. 實例

 2.1 密碼驗證提示組件

<template>
  <div class="pwdTipContent" v-show="isShowTip">
    <dl>
      <dt>
        <i class="iWeak" :class="{active:  degreeNumber >= 3 , normal: degreeNumber==1 || degreeNumber == 2}"></i>
        <i class="iMiddle" :class="{active:  degreeNumber >= 3, normal:  degreeNumber == 2}"></i>
        <i class="iStrong" :class="{active:degreeNumber>=3}"></i>
        <b class="degreeWeak" v-show='degreeNumber==1'>弱</b>
        <b class="degreeMiddle" v-show='degreeNumber==2'>中</b>
        <b class="degreeStrong" v-show='degreeNumber>=3'>強</b>
      </dt>
      <dd>
        <i :class="{'el-icon-warning': !bPwd, 'active': bPwd === false, 'el-icon-success': bPwd}"></i>8-24 位
      </dd>
    </dl>
  </div>
</template>
<script>
  export default {
    name: "verifyPassWordTip",
    props: {
      password: {
        type: String
      },
      isShowTip: {
        type: Boolean
      }
    },
    data() {
      return {
        bPwd: null,//密碼值和長度的驗證
        degreeNumber: 0//密碼復雜度的驗證
      };
    },
    watch: {
      password() {
        this.initPassWord();
      }
    },
    methods: {
      /**
       * 密碼加載
       **/
      initPassWord() {
        if (!this.password) {
          this.$data.bPwd = null; //沒有值標簽背景置灰
          this.$data.degreeNumber=0;
        } else {
          let objReturn = this.passwordValid(this.password);
          if (objReturn) {
            this.$data.bPwd = objReturn.bPwd;
            this.$data.degreeNumber = objReturn.degreeNumber;
          }
        }
      },
      /**
       * 密碼驗證（密碼復雜度：(1)大寫字母(2)小寫字母(3)數字(4)特殊符號，密碼至少需包含上述情形中的三種）
       * @param valPWD輸入的密碼信息
       * @return 返回驗證信息
       **/
      passwordValid(valPwd) {
        let msg = "";
        let degreeNumber = 0;
        let bPwd = false;

        if (valPwd == null || valPwd.length < 8 || valPwd.length > 24 || valPwd.trim().length == "") {
          bPwd = false;
        } else {
          bPwd = true;
        }
        let arrVerify = [
          {regName: 'Number', regValue: /^.*[0-9]+.*/},
          {regName: 'LowerCase', regValue: /^.*[a-z]+.*/},
          {regName: 'UpperCase', regValue: /^.*[A-Z]+.*/},
          {regName: 'SpecialCharacters', regValue: /^.*[^a-zA-Z0-9]+.*/}
        ];
        let regNum = 0;// 記錄匹配的次數
        for (let iReg = 0; iReg < arrVerify.length; iReg++) {
          if (arrVerify[iReg].regValue.test(valPwd)) {
            regNum = regNum + 1;
          }
        }
        degreeNumber = regNum;
        if (regNum <= 2) {
          msg = "密碼必須包含大小寫字母和數字";
        }
        let objReturn = {
          msg: msg,
          degreeNumber: degreeNumber,
          bPwd: bPwd
        };
        return objReturn;
      }
    }
  }
</script>
<style>
  .pwdTipContent .el-icon-warning{
    color:gray;
  }
  .pwdTipContent .el-icon-warning.active{
    color:red;
  }
  .pwdTipContent i.gray{
    color: gray;
  }
  .pwdTipContent .degreeWeak , .pwdTipContent .degreeMiddle{
    color: red;
  }
  .pwdTipContent .el-icon-success{
    color:green;
  }
  .pwdTipContent .degreeStrong {
    color: green;
  }
  i.iWeak.normal, i.iMiddle.normal  {
    background: red;
  }
  i.iWeak.active {
    background: green;
  }
  i.iMiddle.active {
    background: green;
  }
  i.iStrong.active {
    background: green;
  }
  b.active {
    color: red;
  }
  .degreeStrong  {
    color: green;
  }

  .pwdTipContent dt i {
    width: 28px;
    height: 10px;
    display: inline-block;
    background-color: gray;
    margin-right: 10px;
  }

  .pwdTipContent {
    color: #61688a;
    position: absolute;
    min-width: 200px;
    padding: 7px 0 7px 15px;
    background: #fff;
    top: -147px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.4);
    font-size: 12px;
  }

  .pwdTipContent:after {
    width: 0;
    height: 0;
    overflow: hidden;
    content: "";
  }
  .pwdTipContent:after {
    position: absolute;
    bottom: -10px;
    left: 20px;
    border-top: 10px solid #fff;
    border-right: 10px dashed transparent;
    border-left: 10px dashed transparent;
  }
  .pwdTipContent dd, .pwdTipContent dt{
    text-align: left;
  }
</style>

2.2 頁面中引用提示組件

<template>
  <div style="position: absolute; top: 40%; left:40%">
    <el-row style="width: 300px;">
      <el-col :span="24">
        <el-input v-model="password" @focus.capture.native='changePasswordTip(true)'  @blur.capture.native='changePasswordTip(false)' auto-complete="new-password" type="password" placeholder='請輸入密碼' ></el-input>
        <div style="position: absolute">
          <verify-pass-word-tip :password="password" :isShowTip = 'isShowTip'></verify-pass-word-tip>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import verifyPassWordTip from './verifyPassWordTip'
  export default {
    name: "VerifyPassWord",
    components: {
      verifyPassWordTip
    },
    data() {
      return {
        password: '',
        isShowTip: false
      }
    },
    methods: {
      /**
       * 改變密碼提示是否顯示
       **/
      changePasswordTip(isShow) {
        if (isShow) {
          this.isShowTip = true;
        } else {
          this.isShowTip = false;
        }
      },
    }
  }
</script>