js密码强度验证

强度验证"/>

js密码强度验证

做注册界面的时候，输入密码的时候要进行密码强度的验证。

一、html

   <div class="info_pass"><p>安全级别：<strong class="s1">■</strong><strong class="s2">■</strong>strong class="s3">■</strong><strong class="s4" style="font-weight:normal"></strong></p><p><strong class="q1" style="font-weight:normal">○</strong> 6-20 个字符</p><p><strong class="q2" style="font-weight:normal">○</strong>只能包含大小写字母、数字、非空字符</p></div>

/*密码强度样式*/
#reg .info_pass {width: 290px;height: 34px;padding: 4px 0 0 16px;top: 5px;left: 295px;letter-spacing: 0;display: none;
}
#reg .info_pass p {
height:10px;
line-height:10px;
color:#666;
}
#reg .info_pass p strong.s {
color:#ccc;
}

$(document).ready(function () {$('#pwd').bind('focus', focus);$('#pwd').bind('blur', blur);$('#pwd').bind('keyup', keyup);
})//密码框获焦点，密码强度显示
function focus() {$('.info_pass').css('display', 'block');
};
//密码框取消焦点
function blur() {pwd = document.getElementById("pwd").value.trim()//如果密码为空，隐藏if (pwd == "") {$('.info_pass').css('display', 'none');} else {//如果密码强度验证通过，隐藏if (keyup()) {$('.info_pass').css('display', 'none');} else {$('.info_pass').css('display', 'none');}}
};
//表单验证 -- 密码强度验证function keyup() {var flag = false;var value = document.getElementById("pwd").value.trim();var value_length = value.length;var code_length = 0;//6-20位字符验证if (value_length >= 6 && value_length <= 20) {$('.q1').html('●').css('color', 'green');} else {$('.q1').html('○').css('color', '#666');}if (/[0-9]/.test(value)) {code_length++;}if (/[a-z]/.test(value)) {code_length++;}if (/[A-Z]/.test(value)) {code_length++;}//密码是否包含除数字和字母之外的字符if (value_length > 0 && !/\s/.test(value) && !/[^a-zA-Z0-9]/.test(value) && code_length >= 2) {$('.q2').html('●').css('color', 'green');} else {$('.q2').html('○').css('color', '#666');}//安全级别if (code_length >= 2 && value_length >= 15 && ($('.q2').html()) == '●' && ($('.q1').html()) == '●') {$('.s1').css('color', 'green');$('.s2').css('color', 'green');$('.s3').css('color', 'green');$('.s4').html('高').css('color', 'green');} else if (code_length >= 2 && value_length >= 10 && ($('.q2').html()) == '●' && ($('.q1').html()) == '●') {$('.s1').css('color', '#f60');$('.s2').css('color', '#f60');$('.s3').css('color', '#ccc');$('.s4').html('中').css('color', '#f60');} else if (code_length >= 2 && value_length >= 6 && ($('.q2').html()) == '●' && ($('.q1').html()) == '●') {$('.s1').css('color', 'maroon');$('.s2').css('color', '#ccc');$('.s3').css('color', '#ccc');$('.s4').html('低').css('color', 'maroon');} else {$('.s1').css('color', '#ccc');$('.s2').css('color', '#ccc');$('.s3').css('color', '#ccc');$('.s4').html(' ').css('color', '#ccc');}if (value_length >= 6 && value_length <= 20 && code_length >= 2) flag = true;return flag;
}

其实这个密码验证也是很简单的，知道了逻辑，怎样让它显示变色隐藏，代码是很简单的。