四级密码强度检测

最新推荐文章于 2020-05-04 18:33:10 发布

zml_2015

最新推荐文章于 2020-05-04 18:33:10 发布

阅读量1k

点赞数

分类专栏： JS 文章标签：密码强度检测四级密码强度检测

本文链接：https://blog.csdn.net/zml_2015/article/details/50405183

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

</pre><span style="font-size:18px;color:#ff0000;"><strong>四级密码强度检测，主要是用于注册时，检验密码强度</strong></span><pre name="code" class="html">

<!doctype html>
<html >
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="郑明亮">
  <title>四级密码强度检测</title>
 <style>
 #password{float:left;}
 #tips{float:left;margin:2px 0 0 20px;}
#tips span{float:left;width:50px;height:20px;color:#fff;overflow:hidden;background:#ccc;margin-right:2px;line-height:20px;text-align:center}
 #tips .s1{background:#f00;}/* 红色 */
 #tips .s2{background:#fc0;}/* 橙色 */
 #tips .s3{background:#cc0;}/* 黄色 */
 #tips .s4{background:#0a0;}/* 绿色 */
  </style>
 </head>
 <body>
  <input type="text" id="password" />
  <div id="tips">
  <span ></span>
  <span></span>
  <span></span>
  <span></span>
  </div>
  <script>
  var password=document.getElementById("password");
  var spanDoms=document.getElementsByTagName("span");
  var str=["弱","中","强","很强"];
password.οnkeyup=function(){
var index=checkpassword(this.value);
for(var i = 0;i<spanDoms.length;i++){
	spanDoms[i].className="";<!-- 清空span样式 -->
	spanDoms[i].innerHTML="";<!-- 清空span中的内容 -->
	if(index){
		//给span加上class名
		spanDoms[index-1].className="s"+index;
		//给span标签中加入内容
		spanDoms[index-1].innerHTML=str[index-1];
	}
}

}
<!-- 校验密码的长度以及强度 -->
function checkpassword(content){
	//mode=0时，强度不显示，1弱，2中，3强，4很强；
	var mode=0;
	//密码的长度小于6时直接返回mode；
if(content.length<6){
	return mode;
	}
	//判断是否包含数字；
if(/\d/.test(content)){
	mode++;
}
//判断是否包含小写字母；
if(/[a-z]/.test(content)){
	mode++;
}
//判断是否包含大写字母；
if(/[A-Z]/.test(content)){
	mode++;
}
//判断是否有非数字，字母、下划线以外的字符，即特殊符号；
if(/\W/.test(content)){
	mode++;
}
//因为在判断后不能确定是否仍然符合下面的if语句，所以不能马上将mode返回，
//所以通过switch语句返回mode值(break可省略)
switch(mode){
case 1:return 1;
case 2:return 2;
case 3:return 3;
case 4:return 4;
}

}
  </script>
 </body>
</html>