나는 최근에 패스 프로젝트를 진행하고 있습니다. 내부에 등록 모듈에 암호를 입력하려면 비밀번호 강도 (낮음, 중간 및 높음)가 필요합니다. 오늘은 작업 결과를 공유하겠습니다. 이 코드는 온라인 검색만큼 복잡하지 않으며 일반적인 요구를 충족시킬 수 있습니다.
HTML 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en">
<헤드>
<meta charset = "utf-8"/>
<title> 비밀번호 강도 </title>
<스타일 유형 = "텍스트/CSS">
#PassStrength {높이 : 6px; 너비 : 120px; 테두리 : 1px solid #ccc; 패딩 : 2px;}
.strengthlv1 {배경 : 빨간색; 높이 : 6px; 너비 : 40px;}
.strengthlv2 {배경 : 주황색; 높이 : 6px; 너비 : 80px;}
.strengthlv3 {배경 : 녹색; 높이 : 6px; 너비 : 120px;}
</스타일>
</head>
<body>
<입력 유형 = "비밀번호"이름 = "pass"id = "pass"maxlength = "16"/>
<div>
<em> 비밀번호 강도 : </em>
<div id = "passstrength"> </div>
</div>
</body>
</html>
<script type = "text/javaScript"src = "js/passwordStrength.js"> </script>
<script type = "text/javaScript">
새 PasswordStrength ( 'Pass', 'PassStrength');
</스크립트>
JS 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
함수 passwordStrength (passwordId, rengerId) {
this.init (강도);
var _this = this;
document.getElementById (passwordId) .onKeyUp = function () {
_this.checkstrength (this.value);
}
};
passwordStrength.prototype.init = function (res부 id) {
var id = document.getElementById (강도);
var div = document.createelement ( 'div');
var strong = document.createelement ( 'strong');
this.ostrength = id.appendChild (div);
this.ostrengthtxt = id.parentNode.appendChild (strong);
};
passwordStrength.prototype.checkstrength = function (val) {
var alvtxt = [ '', 'low', 'medium', 'high'];
var lv = 0;
if (val.match (/[az]/g)) {lv ++;}
if (val.match (/[0-9]/g)) {lv ++;}
if (val.match (/(.
if (val.length <6) {lv = 0;}
if (lv> 3) {lv = 3;}
this.oStrength.className = '강도 lv' + lv;
this.ostrengthtxt.innerhtml = alvtxt [lv];
};
생식 이미지 :
사용 지침 :
1. 객체의 첫 번째 매개 변수는 암호 입력 상자의 ID이고 두 번째 매개 변수는 비밀번호 강도 막대의 ID입니다.
2. CheckStrength 메소드는 비밀번호 강도 규칙을 사용자 정의 할 수 있습니다.
3. 비밀번호 강도는 낮음, 중간 및 높음이 3 개의 CSS 스타일에 해당합니다 (StrengthLV1, StrengthLV2, StrengthLV3).