检测密码强度的js脚本(改编)

系统管理员 2022-08-05 15:28 154阅读 0赞

1.有时候在用户注册或是修改密码的时候需要用到密码的强度检测.已达到更安全,和提高用户体验度的效果

html部分:

<div class="lineboxname"><span></span> New Password:</div>
    <div class="lineboxinput" style="width:590px;">
          <input type="password" id="password" name="password"/>
    </div>
    <div class="pwdstrength_default" id='pwdLevel_1' style="margin-left:19px;"> </div>
    <div class="pwdstrength_default" id='pwdLevel_2'> </div>
    <div class="pwdstrength_default" id='pwdLevel_3' > </div>
    <div class="pwdstrength_description" style="clear:left;margin-left:190px;"> 弱</div>
    <div class="pwdstrength_description"> 中</div>
    <div class="pwdstrength_description"> 强</div>

css部分:

/*以下为密码强度的css样式*/
    .pwdstrength_default{float:left;background:#d6d3d3;width:62px;height:4px;margin-top:5px;_margin-top:0px;margin-left:5px;_height:2px;font-size:0px;}
    .pwdstrength_description{float:left;width:62px;margin-left:5px;text-align:center;color:#b0adad;font-size:12px;line-height:16px;}
    .pwdstrength_weak{float:left;background:#ff3300;width:62px;height:4px;margin-top:5px;margin-left:5px;_margin-top:0px;_height:2px;font-size:0px;}
    .pwdstrength_medium{float:left;background: #099;width:62px;height:4px;margin-top:5px;margin-left:5px;_margin-top:0px;_height:2px;font-size:0px;}
    .pwdstrength_tough{float:left;background: #060;width:62px;height:4px;margin-top:5px;margin-left:5px;_margin-top:0px;_height:2px;font-size:0px;}

(当然根据前端人员编写的样式的不同,细节样式需要更改)

js文件部分:

$(function(){
    		$('#password').keyup(function () {
    			var __th = $(this);
    
    			if (!__th.val()) {
    				Primary();
    				return;
    			}
    			if (__th.val().length < 6) {
    				Weak();
    				return;
    			}
    			var _r = checkPassword(__th);
    			if (_r < 1) {
    				Primary();
    				return;
    			}
    
    			if (_r > 0 && _r < 2) {
    				Weak();
    			} else if (_r >= 2 && _r < 4) {
    				Medium();
    			} else if (_r >= 4) {
    				Tough();
    			}
    		});
    		function Primary() {
    			$('#pwdLevel_1').attr('class', 'pwdstrength_default');
    			$('#pwdLevel_2').attr('class', 'pwdstrength_default');
    			$('#pwdLevel_3').attr('class', 'pwdstrength_default');
    		}
    		function Weak() {
    			$('#pwdLevel_1').attr('class', 'pwdstrength_weak');
    			$('#pwdLevel_2').attr('class', 'pwdstrength_default');
    			$('#pwdLevel_3').attr('class', 'pwdstrength_default');
    		}
    		function Medium() {
    			$('#pwdLevel_1').attr('class', 'pwdstrength_weak');
    			$('#pwdLevel_2').attr('class', 'pwdstrength_medium');
    			$('#pwdLevel_3').attr('class', 'pwdstrength_default');
    		}
    		function Tough() {
    			$('#pwdLevel_1').attr('class', 'pwdstrength_weak');
    			$('#pwdLevel_2').attr('class', 'pwdstrength_medium');
    			$('#pwdLevel_3').attr('class', 'pwdstrength_tough');
    		}
    		function checkPassword(pwdinput) {
    			var str = $(pwdinput).val();
    			var len = str.length;
    
    			var cat = /.{16}/g;
    			if (len == 0) return 1;
    			if (len > 16) { $(pwdinput).val(str.match(cat)[0]); }
    			cat = /.*[\u4e00-\u9fa5]+.*$/;
    			if (cat.test(str)) {
    				return -1;
    			}
    			cat = /\d/;
    			var maths = cat.test(str);
    			cat = /[a-z]/;
    			var smalls = cat.test(str);
    			cat = /[A-Z]/;
    			var bigs = cat.test(str);
    			var corps = corpses(pwdinput);
    			var num = maths + smalls + bigs + corps;
    
    			if (len < 6) { return 1; }
    
    			if (len >= 6 && len <= 8) {
    				if (num == 1) return 1;
    				if (num == 2 || num == 3) return 2;
    				if (num == 4) return 3;
    			}
    
    			if (len > 8 && len <= 11) {
    				if (num == 1) return 2;
    				if (num == 2) return 3;
    				if (num == 3) return 4;
    				if (num == 4) return 5;
    			}
    
    			if (len > 11) {
    				if (num == 1) return 3;
    				if (num == 2) return 4;
    				if (num > 2) return 5;
    			}
    		}
    
    		function corpses(pwdinput) {
    			var cat = /./g;
    			var str = $(pwdinput).val();
    			var sz = str.match(cat);
    			for (var i = 0; i < sz.length; i++) {
    				cat = /\d/;
    				maths_01 = cat.test(sz[i]);
    				cat = /[a-z]/;
    				smalls_01 = cat.test(sz[i]);
    				cat = /[A-Z]/;
    				bigs_01 = cat.test(sz[i]);
    				if (!maths_01 && !smalls_01 && !bigs_01) { return true; }
    			}
    			return false;
    		}
    });