JS正则表达式应用——基于Jquery的验证密码强度特效

最新推荐文章于 2020-08-10 13:44:02 发布

H小志

最新推荐文章于 2020-08-10 13:44:02 发布

阅读量3.6k

点赞数 3

分类专栏： javascript/jquery 文章标签：正则表达式 javascript jquery

本文链接：https://blog.csdn.net/xiaozhi_2016/article/details/52414477

版权

javascript/jquery 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

当用户登录网站时，一般要求用户提供登录该网站的用户名和密码。从某种意义上说，密码的复杂程度越高，用户的信息安全性越高。因此，很多网站在注册用户信息或修改用户密码时，往往会提供一个密码强度的说明，从而提醒用户使用高强度的密码。目前来说，密码字符可以分为4种：数字、大写字母、小写字母和特殊字符（即除数字、字母之外的字符）。用户密码包含上述4种字符种的种类越多，密码的安全性越高。用户密码只含其中一种的安全性是最低的，如123456、abcdef、YTGHRF、%$#@_?等。其次是含上述2种或3种字符的密码，如123abc、123!@#、123OUI、TYrfAe、ERV#_!、asd?*@、56gb#$、ghBN98、Ycv3?s等。密码强度最好的是：包含上述4种字符，如13QdZ#等。

今天得空分享一下自己写的验证密码强度的特效demo，代码质量还有待优化，还请大家能给出宝贵意见！下图是页面效果。

实例需求：要求输入密码长度6-16位，由字母(区分大小写)、数字、符号组成。密码强度分为3个等级，根据用户输入的密码复杂程度显示不同的强度等级。

基本思路：1.正则表达式验证密码格式是否正确(匹配大小写字母、数字和特殊符号)

2.如果密码格式正确，进一步验证密码的强度等级

a.弱：不管密码有多长，如果只包含小写字母或大写字母或数字或特殊符号中的一种，那密码强度为最弱等级；如果密码长度<=6位，并且包含大写字母、小写字母、数字、特殊符号中的任意2种组合，也属于最弱等级。
b.中：当密码长度>=6&&<=8时，包含大写字母、小写字母、数字、特殊符号中的任意3种或4种混合，密码强度为中间等级；当密码长度 >8&&<=16时，包含大写字母、小写字母、数字、特殊符号中的任意2种或3种组合，也属于中间等级。
c.强：当密码长度>8&&<=16时，同时包含大写字母、小写字母、数字、特殊符号这4个种类，则达到了最强等级。

具体实现：1.页面结构

<form action="#" name="form1" id="form1" method="post">	
    <div class="ywz_zhuce_bao">
        <div class="ywz_zhucexiaobo">
            <div class="ywz_zhuce_youjian">设置密码:</div>
            <div class="ywz_zhuce_xiaoxiaobao">
                <div class="ywz_zhuce_kuangzi">
		    <input name="tbPassword" type="password" id="tbPassword" class="ywz_zhuce_kuangwenzil" />
		</div>
		<div class="ywz_zhuce_huixian" id="pwdLevel_1"></div>     
		<div class="ywz_zhuce_huixian" id="pwdLevel_2"></div>
		<div class="ywz_zhuce_huixian" id="pwdLevel_3"></div>
		<div class="ywz_zhuce_hongxianwenzi" id="levelText_1">弱</div>
		<div class="ywz_zhuce_hongxianwenzi" id="levelText_2">中</div>
		<div class="ywz_zhuce_hongxianwenzi" id="levelText_3">强</div>
	    </div>
            <div class="ywz_zhuce_yongyu1">
		<span id="pwd_tip" style="color: #898989;">
		    <font style="color: #f00;">*</font>
			6-16位，由字母(区分大小写)、数字、符号组成
		</span>
		<span id="pwd_err" style="color: #f00;display: none;">
		    6-16位，由字母(区分大小写)、数字、符号组成
		</span>
            </div>
	</div>
    </div>
</form>

2.css样式

/*密码强度*/
.ywz_zhuce_bao{width: 640px;height: 580px;margin:0 auto;padding: 40px 0px 0px 0px;}
.ywz_zhucexiaobo{float: left;width: 620px;padding-bottom: 10px;padding-top: 5px;margin-left: 20px;}
.ywz_zhuce_youjian{float: left;width: 100px;margin: 5px 0 0 0;font-size: 14px;text-align: right;}
.ywz_zhuce_xiaoxiaobao{float: left;width: 226px;}
.ywz_zhuce_kuangzi{float: left;width: 226px;height: 38px;color: #171717;}
.ywz_zhuce_kuangwenzil{float: left;background: url(../img/dengl_06.jpg) no-repeat;border: 0;color: #3e3e3e;width: 210px;height: 40px;line-height: 35px;padding-left: 25px;_padding-left:20px;outline: medium;}
.ywz_zhuce_huixian{float: left;background: #d6d3d3;width: 72px;height: 6px;margin-top: 5px;_margin-top:0px;margin-left: 5px;_height:2px;font-size: 0px;border-radius: 5px;}
#pwdLevel_1{margin-left: 0px;}
.ywz_zhuce_hongxian{background: #E93807;}
.ywz_zhuce_hongxian2{background: #F58018;}
.ywz_zhuce_hongxian3{background: #68A201;}
.ywz_zhuce_hongxianwenzi{float: left;width: 72px;margin-left: 5px;text-align: center;color: #b0adad;font-size: 12px;}
#levelText_1{margin-left: 0px;}
.ywz_zhuce_yongyu1{float: left;color: #c00;font-size: 12px;padding-left: 10px;margin-top: 10px;_padding-left:0px;}

3.记得引入jquery.min.js,便于对DOM进行操作，接下来即是对密码的验证

$("#tbPassword").focus(function(){     //光标定位在密码框上绑定的事件
    $("#pwdLevel_1").attr("class","ywz_zhuce_hongxian");
    $("#tbPassword").keyup();    //调用keyup()事件
});
$("#tbPassword").keyup(function(){      //为密码框绑定keyup事件
    var _th=$(this);       
    if(!_th.val()){             //判断非空
	console.log(_th.val());
	$("#pwd_tip").hide();     //默认提示语隐藏
	$("#pwd_err").show();     //错误信息显示
	Primary();      //调用Primary(),改变密码强度条显示的样式
	return;
    }
    if(_th.val().length<6){     //判断密码长度是否<6
	$("#pwd_tip").hide();   //默认提示语隐藏
	$("#pwd_err").show();   //错误信息显示
	Weak();  //调用Weak(),改变密码强度条显示的样式
	return;
    }
    var _r=checkPassword(_th);    //调用checkPassword(_th),验证密码格式，返回整数值(true和false相加后的值)，赋值给变量_r
    if(_r<1){      
	$("#pwd_tip").hide();
	$("#pwd_err").show();
	Primary();   //调用Primary(),改变密码强度条显示的样式
	return;
    }
    if(_r>0&&_r<2){
	Weak();    //调用Weak(),改变 密码强度条显示的样式
    }else if(_r>=2&&_r<4){
	Medium();  //调用Medium(),改变密码强度条显示的样式
    }else if(_r>=4){
	Tough();   //调用Tough(),改变密码强度条显示的样式
    }
    $('#pwd_tip').hide();
    $('#pwd_err').hide();
});
//"弱、中、强"对应的条为灰色
function Primary(){
    $("#pwdLevel_1").attr("class","ywz_zhuce_huixian");
    $("#pwdLevel_2").attr("class","ywz_zhuce_huixian");
    $("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
}
//"弱"对应的条高亮
function Weak(){
    $("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
    $("#pwdLevel_2").attr("class","ywz_zhuce_huixian");
    $("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
}
//"弱、中"对应的条高亮
function Medium(){
    $("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
    $("#pwdLevel_2").addClass("ywz_zhuce_hongxian2");
    $("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
}
//"弱、中、强"对应的条高亮
function Tough(){
    $("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
    $("#pwdLevel_2").addClass("ywz_zhuce_hongxian2");
    $("#pwdLevel_3").addClass("ywz_zhuce_hongxian3");
}
//验证密码格式
function checkPassword(pwdinput){
    var maths,smalls,bigs,corps,cat,num;
    var str=$(pwdinput).val();   //输入框密码值
    var len=str.length;         //密码长度
    var cat=/.{16}/g;            //匹配16个字符，除了换行和行结束符
    if(len==0){                  //如果密码长度为0，返回1
	return 1;
    }
    if(len>16){   //如果密码长度超过16位，则密码框内只显示前16位
	$(pwdinput).val(str.match(cat)[0]);
	console.log(str.match(cat)[0]);
    }
    cat=/.*[\u4e00-\u9fa5]+.*$/;   //匹配是否含有汉字
    if(cat.test(str)){      //如果含有汉字，返回-1
	return -1;
    }
    cat=/[0-9]/;    //匹配是否含有数字
    maths=cat.test(str);
    cat=/[a-z]/;  //匹配是否含有小写字母
    smalls=cat.test(str);
    cat=/[A-Z]/;   //匹配是否含有大写字母
    bigs=cat.test(str);
    corps=corpses(pwdinput);    //调用corpses(pwdinput)方法，验证密码框内的值是否同时含有数字、大小写字母
    num = maths + smalls + bigs + corps;    //maths、smalls、bigs、corps为true或false,true表示1,false表示0
    if(len<6){    //如果密码长度<6,返回1
	return 1;
    }
    if(len>=6&&len<=8){   //如果密码长度>=6&&<=8
	if(num==1 || num==2) return 1;   //如果值中包含数字、小写字母、大写字母、特殊符号中的1种或2种,则返回1
	if(num==3 || num==4) return 2; //如果值中包含数字、小写字母、大写字母、特殊符号中的3种或4种,则返回2
    }
    if(len>8){
	if(num==1) return 1;
	if(num==2 || num==3) return 2;
	if(num==4) return 4;
    }
}
function corpses(pwdinput){     //该方法匹配字符串中是否包含特殊字符(即除去大小写字母和数字)
    var cat=/./g;   //匹配单个字符，除了换行和行结束符
    var str=$(pwdinput).val();   //获取密码框内的值
    var sz=str.match(cat);    //匹配单个字符，除了换行和行结束符,返回结果为数组sz
    for(var i=0;i<sz.length;i++){    //循环匹配数组中的每个字符，进行验证
	cat=/[0-9]/;    //匹配是否含有数字
	var maths_01=cat.test(sz[i]);
	cat=/[a-z]/;  //匹配是否含有小写字母
	var smalls_01=cat.test(sz[i]);
	cat=/[A-Z]/;   //匹配是否含有大写字母
	var bigs_01=cat.test(sz[i]);
	if(!maths_01&&!smalls_01&&!bigs_01){   //如果匹配的字符串包含特殊字符，则返回true，否则返回false
	    return true;
        }
    }
    return false;
}

H小志

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS正则表达式应用——基于Jquery的验证密码强度特效

当用户登录网站时，一般要求用户提供登录该网站的用户名和密码。从某种意义上说，密码的复杂程度越高，用户的信息安全性越高。因此，很多网站在注册用户信息或修改用户密码时，往往会提供一个密码强度的说明，从而提醒用户使用高强度的密码。目前来说，密码字符可以分为4种：数字、大写字母、小写字母和特殊字符（即除数字、字母之外的字符）。用户密码包含上述4种字符种的种类越多，密码的安全性越高。用户密码只含其中一种的安
复制链接

扫一扫

专栏目录