js 암호 강 도 를 어떻게 검증 합 니까?
원리:
1.입력 한 비밀번호 가 단순 한 숫자 나 알파벳 이 라면'낮 음'을 알려 줍 니 다.
2.숫자 와 알파벳 이 섞 인 것 이 라면'중'을 제시 합 니 다.
3.만약 에 숫자,자모,특수 문자 가 모두 있 으 면'강'을 제시 합 니 다.
다음은'비밀번호 강도'의 검증 방법 으로 재 미 있 습 니 다.
HTML 과 CSS 코드:
<!DOCTYPE HTML>
<html > <!-- lang="en" -->
<head>
<meta charset="utf-8" />
<title> </title>
<style type="text/css">
#pwdStrength {
height: 30px;
width: 180px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv1 {
background: red;
height: 30px;
width: 60px;
}
.strengthLv2 {
background: orange;
height: 30px;
width: 120px;
}
.strengthLv3 {
background: green;
height: 30px;
width: 180px;
}
#pwd {
height:30px;
font-size :20px;
}
strong {
margin-left:90px;
}
#pwd1 {
color:red;
margin-top:5px;
margin-bottom:5px;
}
</style>
</head>
<body>
<input type="password" name="pwd" id="pwd" maxlength="16" />
<div class="pass-wrap">
<!--<em> ：</em>-->
<p id="pwd1" name="pwd"> :</p>
<div id="pwdStrength"></div>
</div>
</body>
</html>
<script type="text/javascript">
function PasswordStrength(passwordID, strengthID) {
this.init(strengthID);
var _this = this;
document.getElementById(passwordID).onkeyup = function () {//onkeyup , ,
_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 = function (val) { //
var aLvTxt = ['', ' ', ' ', ' '];//
var lv = 0; //
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; } // 6 ，
if (lv > 3) { lv = 3; }
this.oStrength.className = 'strengthLv' + lv;
this.oStrengthTxt.innerHTML = aLvTxt[lv];
};
new PasswordStrength('pwd','pwdStrength');
</script>
소결:
1.onkeyup 이벤트(키보드 버튼 이 풀 렸 을 때 발생)를 이용 하여 세 가지 판단 을 하여 간단 하고 편리 합 니 다.
2.정규 표현 식 의 기능 은 정말 강하 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
