최근에 합격 프로젝트를 진행하고 있는데, 등록 모듈에 비밀번호를 입력할 때 비밀번호 강도(낮음, 중간, 높음)가 표시되어야 합니다. 오늘은 그 결과를 여러분과 공유하겠습니다. 코드는 온라인 검색만큼 복잡하지 않으며 일반적인 요구 사항을 충족할 수 있습니다.
html 코드는 다음과 같습니다.
;비밀번호 강도< ;/title>
비밀번호 강도:
js 코드는 다음과 같습니다.
코드 복사
코드는 다음과 같습니다. function PasswordStrength(passwordID,strengthID){ this.init(strengthID);
var _this = this;
document.getElementById(passwordID).onkeyup = function(){
_this.checkStrength( this.value);
}
};
PasswordStrength.prototype.init = function(strengthID){
var id = document.getElementById(strengthID)
var div = document.createElement ('div');
var Strong = document.createElement('strong');
this.oStrength = id.appendChild(div)
this.oStrengthTxt = id.parentNode.appendChild(strong) ;
};
PasswordStrength.prototype.checkStrength = 함수(val){
var aLvTxt = ['','low','medium','high']; ;
if(val .match(/[a-z]/g)){lv ;}
if(val.match(/[0-9]/g)){lv ;}
if( val.match(/(. [^a-z0-9])/g)){lv ;}
if(val.length < 6){lv=0;}
if(lv > 3){lv=3; }
this.oStrength.className = 'strengthLv' lv;
this.oStrengthTxt.innerHTML = aLvTxt[lv]
렌더링:
사용 지침:
1. 개체의 첫 번째 매개 변수는 비밀번호 입력 상자의 ID이고 두 번째 매개 변수는 비밀번호 강도 표시줄의 ID입니다. .
2. 비밀번호 강도 규칙은 checkStrength 메소드에서 사용자 정의할 수 있습니다.
3. 비밀번호 강도는 3가지 CSS 스타일(strengthLv1, StrengthLv2, StrengthLv3)에 따라 낮음, 중간, 높음으로 표시됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
