一款带隐藏或显示的密码强度验证输入框,一共分3个检测登记,只有6位小写字母时为最低,有大写字母且超过13位时为中,有特效符号时则为最高,每种强度的标记颜色都不同,另外,还可以点击显示或隐藏密码,效果还时挺棒的,喜欢的童鞋请收下把。
页面的head部分,先引入jQuery库,然后设置好页面元素的样式,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
html {
box-sizing: border-box;
font-size: 62.5%;
}
* {
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: inherit;
}
*::after, *::before {
box-sizing: inherit;
}
.bg-transparent {
background-color: transparent !important;
}
.bg-red {
background-color: #e74c3c !important;
}
.bg-orange {
background-color: #e67e22 !important;
}
.bg-green {
background-color: #2ecc71 !important;
}
body .password-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-color: #55bbff;
}
body .password-wrapper {
width: 80%;
max-width: 320px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
body .password-wrapper .input {
border: none;
padding: 10px 15px;
font: small-caption;
font-size: 18px;
font-size: 1.8rem;
width: calc(100% - 50px);
color: #34495e;
outline: none;
line-height: 1.5;
}
body .password-wrapper .icon-wrapper {
position: relative;
display: inline;
float: right;
width: 50px;
height: 50px;
background-color: #34495e;
transition: background-color 0.25s ease-out;
cursor: pointer;
}
body .password-wrapper .icon-wrapper .ion-eye,
body .password-wrapper .icon-wrapper .ion-more {
font-size: 26px;
font-size: 2.6rem;
position: absolute;
top: 11px;
right: 12px;
color: #fff;
transition: color 0.25s ease-out;
}
body .password-wrapper .icon-wrapper .ion-more {
right: 14px;
}
body .password-wrapper .icon-wrapper:hover {
transition: background-color 0.25s ease-out;
background-color: #2c3e50;
}
body .password-wrapper .icon-wrapper:hover .ion-eye,
body .password-wrapper .icon-wrapper:hover .ion-more {
color: #55bbff;
transition: color 0.25s ease-in;
}
body .password-wrapper .strength-lines {
position: absolute;
bottom: 2px;
left: 0;
right: 0;
width: calc(100% - 50px);
height: 6px;
z-index: 3;
}
body .password-wrapper .strength-lines .line {
position: absolute;
background-color: transparent;
height: 6px;
border-radius: 2px;
transition: background-color 0.25s ease-in;
}
body .password-wrapper .strength-lines .line:not(:first-of-type):not(:last-of-type) {
left: 33%;
right: 33%;
}
body .password-wrapper .strength-lines .line:first-of-type {
left: 4px;
right: 68%;
}
body .password-wrapper .strength-lines .line:last-of-type {
left: 68%;
right: 4px;
}
</style>
页面的body部分,有三个部分:输入框、强度等级和显示隐藏按钮,代码如下:
<div class="password-wrapper">
<input id="password-field" type="password" class="input" name="password">
<div class="icon-wrapper">
<span toggle="#password-field" class="ion ion-eye field-icon toggle-password"></span>
</div>
<div class="strength-lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
页面的底部对显示或隐藏事件设置响应,并检测键盘事件和输入的密码强度,代码如下:
$(document).ready(function() {
//隐藏或显示密码
$(".icon-wrapper").click(function() {
$(".toggle-password").toggleClass(".ion-eye ion-more");
var input = $($(".toggle-password").attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
//键盘事件
$("#password-field").on("keyup", function() {
var val = $(this).val(),
color = testPasswordStrength(val);
styleStrengthLine(color, val);
});
//密码强度检测
function testPasswordStrength(value) {
var strongRegex = new RegExp(
"^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[~!@#$%^&*_+])(?=.{13,})"
),
mediumRegex = new RegExp(
"^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})"
);
if (strongRegex.test(value)) {
return "green";
} else if (mediumRegex.test(value)) {
return "orange";
} else {
return "red";
}
}
//密码强度显示样式
function styleStrengthLine(color, value) {
$(".line")
.removeClass("bg-red bg-orange bg-green")
.addClass("bg-transparent");
if (value) {
if (color === "red") {
$(".line:nth-child(1)")
.removeClass("bg-transparent")
.addClass("bg-red");
} else if (color === "orange") {
$(".line:not(:last-of-type)")
.removeClass("bg-transparent")
.addClass("bg-orange");
} else if (color === "green") {
$(".line")
.removeClass("bg-transparent")
.addClass("bg-green");
}
}
}
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791