VUE实现密码验证与提示功能
编程学习 2021-07-04 15:01www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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]+.* 上一篇：vue滚动插件better-scroll使用详解
下一篇：VUE实现图片验证码功能