html中显示密码强度的代码,js检测密码强度的代码(附效果图)

使用javascript代码检测密码的强度，效果图如下所示：

1，js代码：

/**

* js 正则验证密码强度

* by www.jbxue.com

*/

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:''});

}

}