第一个实例
这段 代码比较实用，它完成用户注册时判断用户输入密码的强度，分强、弱、中三等级，它可以根据用户输入的密码显示对应的密码强弱等级，方便用户改进输入。
实现代码：
<html>
<head>
< >JS判断密码强度</ >
< language= >
//判断输入密码的类型
function CharMode(iN){
if (iN>=48 && iN <=57) //数字
return 1;
if (iN>=65 && iN <=90) //大写
return 2;
if (iN>=97 && iN <=122) //小写
return 4;
else
return 8;
}
//bitTotal函数
//计算密码模式
function bitTotal(num){
modes=0;
for (i=0;i<4;i++){
if (num & 1) modes++;
num>>>=1;
}
return modes;
}
//返回强度级别
function checkStrong(sPW){
if (sPW.length<=4)
return 0; //密码太短
Modes=0;
for (i=0;i<sPW.length;i++){
//密码模式
Modes|=CharMode(sPW.charCodeAt(i));
}
return bitTotal(Modes);
}
//显示颜色
function pwStrength(pwd){
O_color=\"#eeeeee\";
L_color=\"#FF0000\";
M_color=\"#FF9900\";
H_color=\"#33CC00\";
if (pwd==null||pwd==\'\'){
Lcolor=Mcolor=Hcolor=O_color;
}
else{
S_level=checkStrong(pwd);
switch(S_level) {
case 0:
Lcolor=Mcolor=Hcolor=O_color;
case 1:
Lcolor=L_color;
Mcolor=Hcolor=O_color;
break;
case 2:
Lcolor=Mcolor=M_color;
Hcolor=O_color;
break;
default:
Lcolor=Mcolor=Hcolor=H_color;
}
}
document.getElementById(\"strength_L\").style.background=Lcolor;
document.getElementById(\"strength_M\").style.background=Mcolor;
document.getElementById(\"strength_H\").style.background=Hcolor;
return;
}
</ >
</head>
<body>
<form name=form1 action=\"\" >
密码:<input type=password size=8 =pwStrength(this.value) =pwStrength(this.value)>
<br>密码强度:
<table width=\"210\" border=\"1\" cellspacing=\"0\" cellpadding=\"1\" bordercolor=\"#eeeeee\" height=\"22\" style=\'display:inline\'>
<tr align=\"center\" bgcolor=\"#f5f5f5\">
<td width=\"33%\" id=\"strength_L\">弱</td>
<td width=\"33%\" id=\"strength_M\">中</td>
<td width=\"33%\" id=\"strength_H\">强</td>
</tr>
</table>
</form>
</body>
</html>
第二个实例：
< >
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: \'\'
});
}
} < / >/
继续阅读与本文标签相同的文章
上一篇 :
微软开源的可视化工具，未免太酷炫了吧
下一篇 :
超详细的微服务分布式架构统一配置中心选型对比
-
PS保存图片提示“无法完成请求”，这里有4种解决方法！
2026-05-14栏目： 教程
-
想买1000元左右的5G手机？我们需要等多久？
2026-05-14栏目： 教程
-
剧情反转？美企主动购买华为5G技术，华为成赞赏排行榜第一名！
2026-05-14栏目： 教程
-
城市数字化后，新一代内生安全系统可全方位保护
2026-05-14栏目： 教程
-
谷歌也来“唱衰”5G，5G手机只会徒增功耗？为何这么说？
2026-05-14栏目： 教程