JS 비밀번호 강도 확인(IE, Firefox, Google과 호환)_javascript 기술-JS 튜토리얼-php.cn

大概样式:

JS 비밀번호 강도 확인(IE, Firefox, Google과 호환)_javascript 기술
源码:

/ /=================HTML页면===================

<양식>

<테이블>

密码:

onblur="ValidateInput('password',this.value)" onkeydown="validatePwdStrong(this.value);" />

JS文件

复代码代码如下:

 
/ /使용$替换document.getElementById函数 
var $ = function(v) { return document.getElementById(v); } 

/**************************************************** * **사용자 입력 확인******************************************** * ***********/ 
function ValidateInput(요소, 값) { 
//验证密码 
if (요소 == "비밀번호") { 
if (value.toString().length < 6) { 
$('tipPosition').className = 'error'; 
$('tipPosition').innerHTML = "사용 가능한 정보가 없습니다."; 
반환; 
} 
else { 
$('tipPosition').className = '성공'; 
$('tipPosition').innerHTML = "수정수정。"; 
} 
} 
} 
/*===============================密码验证JS =========== 시작=================================== ===*/ 
//密码初始性样式 
function InitCss() { 
$('tipPosition').className = 'tip'; 
$('tipPosition').innerHTML = "최소 속도:6° 최대 속도:16°"; 
} 

/*=================================== =======시작======================================*/ 

function Evaluate(word) { 
return word.replace(/^(?:([a-z])|([A-Z])|([0-9])|(.)){5 ,}|(.) $/g, "$1$2$3$4$5").length; 
} 

function verifyPwdStrong(값) { 
var pwd = { 
color: ['#E6EAED', '#AC0035', '#FFCC33', '#639BCC', ' #246626'], 
text: ['大短', '弱', '一般', '很好', '极佳'] 
}; 
function colorInit() { 
$('pwdStrong_1').style.BackgroundColor = pwd.color[0]; 
$('pwdStrong_2').style.BackgroundColor = pwd.color[0]; 
$('pwdStrong_3').style.BackgroundColor = pwd.color[0]; 
$('pwdStrong_4').style.BackgroundColor = pwd.color[0]; 
} 
if (Evaluate(value) == 1) { 
colorInit(); 
$('pwdStrong_1').style.BackgroundColor = pwd.color[1]; 
$('pwdStrong_text').innerHTML = pwd.text[1]; 
$('pwdStrong_text').style.color = pwd.color[1]; 
} 
else if (Evaluate(value) == 2) { 
colorInit(); 
$('pwdStrong_1').style.BackgroundColor = pwd.color[2]; 
$('pwdStrong_2').style.BackgroundColor = pwd.color[2]; 
$('pwdStrong_text').innerHTML = pwd.text[2]; 
$('pwdStrong_text').style.color = pwd.color[2]; 
} 
else if (Evaluate(value) == 3) { 
colorInit(); 
$('pwdStrong_1').style.BackgroundColor = pwd.color[3]; 
$('pwdStrong_2').style.BackgroundColor = pwd.color[3]; 
$('pwdStrong_3').style.BackgroundColor = pwd.color[3]; 
$('pwdStrong_text').innerHTML = pwd.text[3]; 
$('pwdStrong_text').style.color = pwd.color[3]; 
} 
else if (Evaluate(value) == 4) { 
$('pwdStrong_1').style.BackgroundColor = pwd.color[4]; 
$('pwdStrong_2').style.BackgroundColor = pwd.color[4]; 
$('pwdStrong_3').style.BackgroundColor = pwd.color[4]; 
$('pwdStrong_4').style.BackgroundColor = pwd.color[4]; 
$('pwdStrong_text').innerHTML = pwd.text[4]; 
$('pwdStrong_text').style.color = pwd.color[4]; 
} 
} 

//==================CSS 파일=================

코드 복사 코드는 다음과 같습니다.

 
본문
{ 
글꼴: 13px 송나라; 
} 
/*비밀번호 확인 프롬프트 CSS --------------------------------시작- ----- -------------*/ 
#tipPosition 
{ 
너비: 400px 
높이: 16px ; 
줄 높이: 18px; 
패딩: 2px 30px; 
} 
.tip 
{ 
배경: #E6F2FF url(images/register_tip.png ) 반복 없음 10px 중앙; 
경계: 1px #0E5863 점선 
색상: #0E5863; 
} 
.error 
{ 
배경: #FBECDF url(images/register_error .png) 10픽셀 반복 없음 
테두리: 1px 빨간색 점선 
색상: #6D3737; 
} 
.success 
{ 
배경: #D6FCD2 ​​​​url( Images/register_success.png) no -repeat 10px center; 
border: 1px #2F5D36 dashed; 
color: #3D934A; 
} 
/*비밀번호 강도 CSS -------- ------- -----------------시작------------------------- ------- */ 
#pwdStrong_color 
{ 
너비: 136px; 
높이: 3px 
border-collapse: 축소; >테두리 간격: 0; 
배경: #E6EAED; 
여백: 5px; 
} 
#pwdStrong_color td 
{ 
폭: 44px; /*td 너비를 추가하지 않으면 Google Chrome이 정상적으로 표시되지 않습니다*/ 
} 
#pwdStrong_text 
{ 
font: 12px Song Dynasty; 