带隐藏或显示的密码强度验证输入框【原创

来源:https://www.sucaihuo.com/js/2416.html 2017-07-14 23:04浏览(1255) 收藏

一款带隐藏或显示的密码强度验证输入框,一共分3个检测登记,只有6位小写字母时为最低,有大写字母且超过13位时为中,有特效符号时则为最高,每种强度的标记颜色都不同,另外,还可以点击显示或隐藏密码,效果还时挺棒的,喜欢的童鞋请收下把。
带隐藏或显示的密码强度验证输入框
分类:表单代码 > 输入框 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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");
			}
		}
	}
});
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2416.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2