博客文章已转移到新地址,本地址暂时保留,新文章仅在新地址更新。[置顶]

密码强度检测之jq正则表达式

作者:小宝 2017-06-15 10:06:35

对密码强度的检测是为了提醒用户设置更加完全的密码,可以有效防止弱密码被猜对更改。密码强度检测可以用JavaScript原生做也可以用js的jq库做,相对来说,用jq更容易简洁。

密码强度大概是分为三个等级(弱密码,中等密码,强密码),对应着可以改变字体的颜色以提醒用户,给用户更好的体验。

步骤:

1.在需要验证的位置添加ID属性,以方便js获取元素。

2.定义正则表达式,分三种情况。

3.获取目标元素,监控鼠标或者键盘活动。

4.判断目标内容是否符合正则要求,并及时反馈给页面对应位置。

代码:

1.html代码

<input type="password" class="form-control"  id="pwd1" name="password" placeholder="请填写登录密码" />
<span id="passstrength"></span>


2.jq代码

<script>
		$(function(){ 
			$('#pwd1').blur(function(e) {    
			//密码为八位及以上并且字母数字特殊字符三项都包括
			var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
			//密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等
			var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
			//密码为六位以下
			var enoughRegex = new RegExp("(?=.{6,}).*", "g");			
			if (false == enoughRegex.test($(this).val())) {
				$('#passstrength').html('密码至少6位数哦');
				$('#passstrength').css('color','red');
			} else if (strongRegex.test($(this).val())) {
				$('#passstrength').className = 'ok';
				$('#passstrength').css('color','green');
				$('#passstrength').html('强度较强!');
			} else if (mediumRegex.test($(this).val())) {
				$('#passstrength').className = 'alert';
				$('#passstrength').css('color','blue');
				$('#passstrength').html('强度中等!');
			} else {
				$('#passstrength').className = 'error';
				$('#passstrength').css('color','#ca7418');
				$('#passstrength').html('密码太弱!');
			}
			return true;
			});
		});
	</script>

效果图:


©BRISKLAN;备案信息:桂ICP备16004757号-1