先看效果图：
javascript密码强度校验代码，具体实现思路不多说了，请看下面代码和demo。
第一种方法：
/*
*密码安全程度
*return ：全部为字母或者数字,或者密码长度小于
*return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
*return : 字母和数字和特殊字符
*/
string.prototype.passwordstrength=function(){
if(this.length> && this.length<=) return ;
var n = (this.search(/[a-za-z]/) != -) ? : ,
n = (this.search(/[-]/) != -) ? : ,
n =(this.search(/[~`!@#$\%^&*()\_+-=[]|{};":",./<>?]{,}/) != -) ? : ;
return n+n+n;
}
demo
<!doctype html>
<html>
<head>
<meta charset="utf-">
<title>js密码强度</title>
<style type="text/css">
.pw_letter{ margin-top:px; font-size: px; }
.pw_letter label{float: left; margin-right:px; cursor: default; font-size: px; line-height: px;;}
.pw_letter span{ float: left; display:inline-block; width:px; height:px; line-height:px; text-align:center; color:#fff; background-color:#ccc; border-left: px solid #fff;}
.pw_letter span.pw_strength_color{ background-color:green;}
</style>
</head>
<body>
<input id="password" type="password" name="password" placeholder="密码" onkeyup="setpasswordstrength(this.value.trim())">
<p class="pw_letter"><label>安全程度</label> <span class="strength">弱</span> <span class="strength">中</span> <span class="strength">强</span> </p>
<script type="text/javascript">
/*
*密码安全程度
*return ：全部为字母或者数字,或者密码长度小于
*return : 字母数字组成，或者字母特殊字符，或者数字和特殊字符
*return : 字母和数字和特殊字符
*/
string.prototype.passwordstrength=function(){
if(this.length> && this.length<=) return ;
var n = (this.search(/[a-za-z]/) != -) ? : ,
n = (this.search(/[-]/) != -) ? : ,
n =(this.search(/[~`!@#$\%^&*()\_+-=[]|{};":",./<>?]{,}/) != -) ? : ;
return n+n+n;
}
string.prototype.trim = string.prototype.trim || function(){
return this.replace(/^s+|s+$/g,"");
}
function setpasswordstrength(pwd){
var strength_span = document.getelementsbyclassname("strength");
for(var i=; i<strength_span.length; i++){
strength_span.item(i).classname="strength";
}
for(var i=; i<pwd.passwordstrength(); i++){
document.getelementsbyclassname("strength").item(i).classname="strength pw_strength_color";
}
}
</script>
</body>
第二种方法：
javascript代码如下：
<script>
function authpasswd(string) {
if(string.length >=6) {
if(/[a-za-z]+/.test(string) && /[0-9]+/.test(string) && /w+d+/.test(string)) {
noticeassign(1);
}else if(/[a-za-z]+/.test(string) || /[0-9]+/.test(string) || /w+d+/.test(string)) {
if(/[a-za-z]+/.test(string) && /[0-9]+/.test(string)) {
noticeassign(-1);
}else if(/[a-za-z]+/.test(string) && /w+d+/.test(string)) {
noticeassign(-1);
}else if(/[0-9]+/.test(string) && /w+d+/.test(string)) {
noticeassign(-1);
}else{
noticeassign(0);
}
}
}else{
noticeassign(null);
}
}
function noticeassign(num) {
if(num == 1) {
$("#weak").css({backgroundcolor:"#009900"});
$("#middle").css({backgroundcolor:"#009900"});
$("#strength").css({backgroundcolor:"#009900"});
$("#strength").html("很强");
$("#middle").html("");
$("#weak").html("");
}else if(num == -1){
$("#weak").css({backgroundcolor:"#ffcc33"});
$("#middle").css({backgroundcolor:"#ffcc33"});
$("#strength").css({backgroundcolor:""});
$("#weak").html("");
$("#middle").html("中");
$("#strength").html("");
}else if(num ==0) {
$("#weak").css({backgroundcolor:"#dd0000"});
$("#middle").css({backgroundcolor:""});
$("#strength").css({backgroundcolor:""});
$("#weak").html("弱");
$("#middle").html("");
$("#strength").html("");
}else{
$("#weak").html(" ");
$("#middle").html(" ");
$("#strength").html(" ");
$("#weak").css({backgroundcolor:""});
$("#middle").css({backgroundcolor:""});
$("#strength").css({backgroundcolor:""});
}
}
</script>
以上就是javascript判断密码强度代码展示的详细内容。