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 页面中引用提示组件
