使用VUE實現密碼驗證與提示功能的案例

這篇文章給大家分享的是有關使用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 >
 <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>

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