密码强度有4个状态,分别如下图。
无密码状态
密码低级状态
密码中级状态
密码高级状态
实现的代码主要如下:
HTML代码
& lt;输入name="密码"类型=懊苈搿北?
& lt;表边界=" 0 "单元格边距=" 0 "单元格间距=" 0 "比;
& lt; tr对齐=爸行摹北?
& lt; td id=" pwd_Weak " class=" pwd pwd_c祝辞& lt;/td>
& lt; td id=" pwd_Medium " class=" pwd pwd_c pwd_f”在无& lt;/td>
& lt; td id=" pwd_Strong " class=" pwd pwd_c pwd_c_r”比;& lt;/td>
& lt;/tr>
& lt;/table>
之前
CSS代码
.pwd{宽度:50 px;高度:20 px;行高:14 px; padding-top: 2 px;}
.pwd_f{颜色:# BBBBBB;}
.pwd_c {background - color: # F3F3F3; border-top: 1 px固体# D0D0D0;边界底部:1 px固体# D0D0D0; border-left: 1 px固体# D0D0D0;}
.pwd_Weak_c {background - color: # FF4545; border-top: 1 px固体# BB2B2B;边界底部:1 px固体# BB2B2B; border-left: 1 px固体# BB2B2B;}
.pwd_Medium_c {background - color: # FFD35E; border-top: 1 px固体# E9AE10;边界底部:1 px固体# E9AE10; border-left: 1 px固体# E9AE10;}
.pwd_Strong_c {background - color: # 3 abb1c; border-top: 1 px固体# 267 a12;边界底部:1 px固体# 267 a12; border-left: 1 px固体# 267 a12;}
.pwd_c_r{边境:1 px固体# D0D0D0;}
.pwd_Weak_c_r{边境:1 px固体# BB2B2B;}
.pwd_Medium_c_r{边境:1 px固体# E9AE10;}
.pwd_Strong_c_r{边境:1 px固体# 267 a12;}
之前
JS代码
函数CheckIntensity (pwd) {
var Mcolor、Wcolor Scolor Color_Html;
var m=0;//匹配数字
如果(\ d +/test (pwd)) {
调试器;
m + +;
};//匹配字母
如果(/(A-Za-z) +/test (pwd)) {
m + +;
};//匹配除数字字母外的特殊符号
如果(/[^ 0-9a-zA-Z] +/test (pwd)) {
m + +;
};
如果(pwd)。长度& lt;=6) {m=1;}
如果(pwd)。长度& lt;=0) {m=0;}
开关(m) {
案例1:
Wcolor=" pwd pwd_Weak_c”;
Mcolor=" pwd pwd_c”;
Scolor=" pwd pwd_c pwd_c_r”;
Color_Html=叭酢?
打破;
案例2:
Wcolor=" pwd pwd_Medium_c”;
Mcolor=" pwd pwd_Medium_c”;
Scolor=" pwd pwd_c pwd_c_r”;
Color_Html=爸小?
打破;
案例3:
Wcolor=" pwd pwd_Strong_c”;
Mcolor=" pwd pwd_Strong_c”;
Scolor=" pwd pwd_Strong_c pwd_Strong_c_r”;
Color_Html="强";
打破;
默认值:
Wcolor=" pwd pwd_c”;
Mcolor=" pwd pwd_c pwd_f”;
Scolor=" pwd pwd_c pwd_c_r”;
Color_Html="无";
打破;
}
. getelementbyid (“pwd_Weak”)。className=Wcolor;
. getelementbyid (“pwd_Medium”)。className=Mcolor;
. getelementbyid (“pwd_Strong”)。className=Scolor;
. getelementbyid (“pwd_Medium”)。innerHTML=Color_Html;
}
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
