使用VUE實(shí)現(xiàn)密碼驗(yàn)證與提示功能的案例

這篇文章給大家分享的是有關(guān)使用VUE實(shí)現(xiàn)密碼驗(yàn)證與提示功能的案例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

1. 概述

1.1 說明

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

1.2 條件與思路

　　1.密碼框得到焦點(diǎn)顯示提示信息

　　2.驗(yàn)證密碼長度在8到24位之間

　　3.驗(yàn)證密碼復(fù)雜度(數(shù)字/小寫字母/大寫字母/特殊字符三項(xiàng)或三項(xiàng)以上)

　　4.密碼框失去焦點(diǎn)隱藏提示信息

 2. 實(shí)例

 2.1 密碼驗(yàn)證提示組件

<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'>強(qiáng)</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,//密碼值和長度的驗(yàn)證
 degreeNumber: 0//密碼復(fù)雜度的驗(yàn)證
 };
 },
 watch: {
 password() {
 this.initPassWord();
 }
 },
 methods: {
 /**
 * 密碼加載
 **/
 initPassWord() {
 if (!this.password) {
  this.$data.bPwd = null; //沒有值標(biāo)簽背景置灰
  this.$data.degreeNumber=0;
 } else {
  let objReturn = this.passwordValid(this.password);
  if (objReturn) {
  this.$data.bPwd = objReturn.bPwd;
  this.$data.degreeNumber = objReturn.degreeNumber;
  }
 }
 },
 /**
 * 密碼驗(yàn)證（密碼復(fù)雜度：(1)大寫字母(2)小寫字母(3)數(shù)字(4)特殊符號，密碼至少需包含上述情形中的三種）
 * @param valPWD輸入的密碼信息
 * @return 返回驗(yàn)證信息
 **/
 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;// 記錄匹配的次數(shù)
 for (let iReg = 0; iReg < arrVerify.length; iReg++) {
  if (arrVerify[iReg].regValue.test(valPwd)) {
  regNum = regNum + 1;
  }
 }
 degreeNumber = regNum;
 if (regNum <= 2) {
  msg = "密碼必須包含大小寫字母和數(shù)字";
 }
 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 >
 <el-row >
 <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 >
  <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>

感謝各位的閱讀！關(guān)于“使用VUE實(shí)現(xiàn)密碼驗(yàn)證與提示功能的案例”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！