介绍 & lt; template>
,& lt; div 类=皃wdTipContent", v-show=癷sShowTip"比;
,& lt; dl>
,& lt; dt>
,& lt;小姐:类=癷Weak",:类=皗活跃:degreeNumber 祝辞=,3,,,正常:,degreeNumber==1, | |, degreeNumber ==, 2}“祝辞& lt;/i>
,& lt;小姐:类=癷Middle",:类=皗活跃:degreeNumber 祝辞=,3,正常:,degreeNumber ==, 2}“祝辞& lt;/i>
,& lt;小姐:类=癷Strong",:类=皗活跃:degreeNumber>=3}“祝辞& lt;/i>
,& lt; b 类=癲egreeWeak", v-show=& # 39; degreeNumber==1 & # 39;在弱& lt;/b>
,& lt; b 类=癲egreeMiddle", v-show=& # 39; degreeNumber==2 & # 39;祝辞中& lt;/b>
,& lt; b 类=癲egreeStrong", v-show=& # 39; degreeNumber>=3 & # 39;在强& lt;/b>
,& lt;/dt>
,& lt; dd>
,& lt;小姐::类=皗& # 39;el-icon-warning& # 39;:, ! bPwd,, & # 39;活跃# 39;:,bPwd ===,假,,& # 39;el-icon-success& # 39;:, bPwd}“祝辞& lt;/i> 8-24 位
,& lt;/dd>
,& lt;/dl>
,& lt;/div>
& lt;/template>
& lt; script>
,export default {
,名字:“verifyPassWordTip",
,道具:{
,密码:{
,类型:字符串
},
,isShowTip: {
,类型:布尔
,}
},
,数据(){
,return {
,bPwd: null,//密码值和长度的验证
,degreeNumber: 0//密码复杂度的验证
,};
},
,看:{
,密码(){
,this.initPassWord ();
,}
},
,方法:{/* *
,*密码加载
* */,initPassWord (), {
,if (! this.password), {
这个。才能data.bPwd 美元;=,零,,//没有值标签背景置灰
这才能。美元data.degreeNumber=0;
,}else {
let 才能;objReturn =, this.passwordValid (this.password);
if 才能;(objReturn), {
这才能。data.bPwd 美元;=,objReturn.bPwd;
这才能。data.degreeNumber 美元;=,objReturn.degreeNumber;
,,}
,}
},/* *
,*密码验证(密码复杂度:(1)大写字母(2)小写字母(3)数字(4)特殊符号,密码至少需包含上述情形中的三种)
,* @param valPWD输入的密码信息
,* @return 返回验证信息
* */,passwordValid (valPwd), {
,let msg =,““
,let degreeNumber =, 0;
,let bPwd =,假;
,if (valPwd ==, null | |, valPwd.length & lt;, 8, | |, valPwd.length 祝辞,24,| |,valPwd.trim () .length ==,““), {
时间=bPwd 才能;假;
,}else {
bPwd =,才能正确;
,}
,let arrVerify =, (
{才能regName: & # 39;数字# 39;,,regValue:,/* [0 - 9] + ^。*/},
{才能regName: & # 39;小写# 39;,,regValue:,/* [a - z] + ^。*/},
{才能regName: & # 39;大写# 39;,,regValue:,/* [a - z] + ^。*/},
{才能regName: & # 39; SpecialCharacters& # 39;,, regValue:,/^。* [^ a-zA-Z0-9] +。*/}
,);
,let regNum =, 0;//,记录匹配的次数
,for (let iReg =, 0;, iReg & lt;, arrVerify.length;, iReg + +), {
if 才能;(arrVerify [iReg] .regValue.test (valPwd)), {
时间=regNum 才能;regNum +, 1;
,,}
,}=,degreeNumber 统治;
,if (regNum & lt;=, 2), {
msg =,才能“密码必须包含大小写字母和数字“;
,}
,let objReturn =, {
,,味精:味精,
,,degreeNumber: degreeNumber,
bPwd才能:bPwd
,};
,return objReturn;
,}
,}
,}
& lt;/script>
& lt; style>
,.pwdTipContent .el-icon-warning {
,颜色:灰色;
,}
,.pwdTipContent .el-icon-warning.active {
,颜色:红色;
,}
,.pwdTipContent i.gray {
,颜色:灰色;
,}
,.pwdTipContent .degreeWeak .pwdTipContent .degreeMiddle {
,颜色:红色;
,}
,.pwdTipContent .el-icon-success {
,颜色:绿色;
,}
,.pwdTipContent .degreeStrong {
,颜色:绿色;
,}
,i.iWeak.normal, i.iMiddle.normal {
,背景:红色;
,}
,i.iWeak.active {
,背景:绿色;
,}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关使用VUE实现密码验证与提示功能的案例的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
<强> 1。概述
<强> 1.1说明 <强>
vue项目中,为了较为明了的让用户看到所输入的密码信息的长度与复杂度是否满足要求,开发一个组件来满足此需求(当密码输入时进行密码验证操作,当密码的长度在8到24位之间,密码中包含数字/小写字母/大写字母/特殊字符中的三项或三项以上则位正确)。
<强> 1.2条件与思路
1。密码框得到焦点显示提示信息
2。验证密码长度在8到24位之间
3。验证密码复杂度(数字/小写字母/大写字母/特殊字符三项或三项以上)
4。密码框失去焦点隐藏提示信息
<强>,2。实例
<强>,2.1密码验证提示组件
