对密码强度的检测是为了提醒用户设置更加完全的密码，可以有效防止弱密码被猜对更改。密码强度检测可以用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>
效果图：
