티스토리 뷰
관련 문서
- http://blog.naver.com/PostView.nhn?blogId=da10316&logNo=70114357936 (JavaScript Password Strength Validator)
- http://m-ulyanov.github.io/mytooltip/ (mytooltip jquery plugin)
- https://help.naver.com/support/contents/contents.nhn?serviceNo=532&categoryNo=2154 (네이버 비밀번호 안전 진단 페이지)
비밀번호 안전도 체크(Tootip)
네이버 비밀번호 찾기 화면을 유사하게 구현하기
신규 비밀번호 입력시 비밀번호 안정성 정보가 실시간으로 tooltip(말풍선) 형태로 표시
jquery 플러그인을 사용
mytooltip jquery plugin (https://github.com/M-Ulyanov/myTooltip)
1. js/css link
<link rel="stylesheet" href="./myTooltip.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="./myTooltip.js"></script>
2. view
<style>
.mytooltip-content {
width: 300px;
}
</style>
<div id="" class="" style="display: block;">
<h2>Change Password</h2>
<div id="" class="form-group col-xs-2">
<label id="" class="">ID</label>
<input id="ch_userId" class="form-control" type="text" tabindex="1">
<label id="" class="">Currnet Password</label>
<input class="form-control" id="ch_current_pw" ref="" type="password" style="" tabindex="2">
<label id="" class="">New Password</label>
<input class="js-mytooltip-pw form-control" id="ch_new_pw" type="password" style="" tabindex="3"
data-mytooltip-direction="right"
data-mytooltip-dinamic-content="true"
data-mytooltip-action="focus"
data-mytooltip-animate-duration="0">
<label id="" class="">Confirm Password</label>
<input id="ch_re_pw" class="form-control" type="password" tabindex="4">
</div>
</div>3. Javacript
<script>
isNull = function(object) {
try {
if (typeof object == "boolean"){
return false;
} else {
return (object == null || typeof object == "undefined" || object === "" || object == "undefined");
}
} catch (e) {
alert("isNull: " + object +"::"+ e.message);
WebSquare.exception.printStackTrace(e);
}
};
//신규 비밀번호 체크
function getPwContent(key) {
var pwd = key;
var passed = validatePassword(pwd);
return passed;
}
//비밀번호 안정성 체크
function validatePassword (pw, options) {
var o = {
length: [6, 16],
lower: 1,
upper: 1,
alpha: 1, /* lower + upper */
numeric: 1,
special: 1,
custom: [ /* regexes and/or functions */ ],
badWords: [],
badSequenceLength: 5,
noQwertySequences: true,
spaceChk: true,
noSequential: false
};
// space bar check
if (o.spaceChk && /\s/g.test(pw)) {
return "<p style='line-height:200%;'><span style='color:#E3691E; font-weight:bold;'>사용불가</span> : 비밀번호 재작성 필요"
+ "<br/>"
+ "<span style='color:#999; font-weight:bold;'>영문 대소문자, 숫자 및 특수문자 사용</span></p>";
}
//password 길이 체크
if (pw.length < o.length[0])
return "<p style='line-height:200%;'><span style='color:#E3691E; font-weight:bold;'>사용불가</span>"
+ "<br/>"
+ "<span style='color:#999; font-weight:bold;'>비밀번호는 " + o.length[0] + "자 이상 입력하셔야 합니다.</span></p>";
if (pw.length > o.length[1])
return "<p style='line-height:200%;'><span style='color:#E3691E; font-weight:bold;'>사용불가</span>"
+ "<br/>"
+ "<span style='color:#999;'>비밀번호는 " + o.length[1] + "자 이내로 입력하셔야 합니다.</span></p>";
// bad sequence check
if (o.badSequenceLength && pw.length >= o.length[0]) {
var lower = "abcdefghijklmnopqrstuvwxyz",
upper = lower.toUpperCase(),
numbers = "0123456789",
qwerty = "qwertyuiopasdfghjklzxcvbnm",
start = o.badSequenceLength - 1,
seq = "_" + pw.slice(0, start);
for (i = start; i < pw.length; i++) {
seq = seq.slice(1) + pw.charAt(i);
if (
lower.indexOf(seq) > -1 ||
upper.indexOf(seq) > -1 ||
numbers.indexOf(seq) > -1 ||
(o.noQwertySequences && qwerty.indexOf(seq) > -1)
) {
return "<p style='line-height:200%;'>비밀번호 안전도 <span style='color:#E5E5E5'>|</span> <span style='color:#E3691E; font-weight:bold;'>낮음</span> "
+ "<span style='color:#E3691E; font-weight:bold; font-size:20px; position: relative; top: 1.5px;'>―</span>"
+ "<span style='color:#E5E5E5; font-weight:bold; font-size:20px; position: relative; top: 1.5px;''>―</span>"
+ "<span style='color:#E5E5E5; font-weight:bold; font-size:20px; position: relative; top: 1.5px;''>―</span>"
+ "<br/>"
+ "<span style='color:#999; font-weight:bold;'>안전도가 높은 비밀번호를 권장합니다.</span></p>";
}
}
}
//password 정규식 체크
var re = {
lower: /[a-z]/g,
upper: /[A-Z]/g,
alpha: /[A-Z]/gi,
numeric: /[0-9]/g,
special: /[\W_]/g
},
rule, i;
var lower = (pw.match(re['lower']) || []).length > 0 ? 1 : 0;
var upper = (pw.match(re['upper']) || []).length > 0 ? 1 : 0;
var numeric = (pw.match(re['numeric']) || []).length > 0 ? 1 : 0;
var special = (pw.match(re['special']) || []).length > 0 ? 1 : 0;
//숫자로만 이루어지면 낮음
if((pw.match(re['numeric']) || []).length == pw.length ) {
return "<p style='line-height:200%;'><span style='color:#E3691E; font-weight:bold;'>사용불가</span> : 비밀번호 재작성 필요"
+ "<br/>"
+ "<span style='color:#999; font-weight:bold;'>영문 대소문자, 숫자 및 특수문자 사용</span></p>";
}
//숫자, 알파벳(대문자, 소문자), 특수문자 2가지 조합
else if(lower + upper + numeric + special <= 2){
return "<p style='line-height:200%;'>비밀번호 안전도 <span style='color:#E5E5E5'>|</span> <span style='color:#E3691E; font-weight:bold;'>낮음</span> "
+ "<span style='color:#E3691E; font-weight:bold; font-size:20px; position: relative; top: 1.5px;'>―</span>"
+ "<span style='color:#E5E5E5; font-weight:bold; font-size:20px; position: relative; top: 1.5px;''>―</span>"
+ "<span style='color:#E5E5E5; font-weight:bold; font-size:20px; position: relative; top: 1.5px;''>―</span>"
+ "<br/>"
+ "<span style='color:#999; font-weight:bold;'>안전도가 높은 비밀번호를 권장합니다.</span></p>";
}
//숫자, 알파벳(대문자, 소문자), 특수문자 4가지 조합
else if(lower + upper + numeric + special <= 3) {
return "<p style='line-height:200%;'>비밀번호 안전도 <span style='color:#E5E5E5'>|</span> <span style='color:#E3691E; font-weight:bold;'>적정</span> "
+ "<span style='color:#E3691E; font-weight:bold; font-size:20px; position: relative; top: 1.5px;'>―</span>"
+ "<span style='color:#E3691E; font-weight:bold; font-size:20px; position: relative; top: 1.5px;''>―</span>"
+ "<span style='color:#E5E5E5; font-weight:bold; font-size:20px; position: relative; top: 1.5px;''>―</span>"
+ "<br/>"
+ "<span style='color:#999; font-weight:bold;'>안전하게 사용하실 수 있는 비밀번호 입니다.</span></p>";
}
//숫자, 알파벳(대문자, 소문자), 특수문자 4가지 조합
else {
return "<p style='line-height:200%;'>비밀번호 안전도 <span style='color:#E5E5E5'>|</span> <span style='color:#E3691E; font-weight:bold;'>높음</span> "
+ "<span style='color:#E3691E; font-weight:bold; font-size:20px; position: relative; top: 1.5px;'>―</span>"
+ "<span style='color:#E3691E; font-weight:bold; font-size:20px; position: relative; top: 1.5px;''>―</span>"
+ "<span style='color:#E3691E; font-weight:bold; font-size:20px; position: relative; top: 1.5px;''>―</span>"
+ "<br/>"
+ "<span style='color:#999; font-weight:bold;'>예측하기 힘든 비밀번호로 더욱 안전합니다.</span></p>";
}
// enforce the no sequential, identical characters rule
if (o.noSequential && /([\S\s])\1/.test(pw))
return "no sequential";
// enforce word ban (case insensitive)
for (i = 0; i < o.badWords.length; i++) {
if (pw.toLowerCase().indexOf(o.badWords[i].toLowerCase()) > -1)
return "bad word";
}
// enforce custom regex/function rules
for (i = 0; i < o.custom.length; i++) {
rule = o.custom[i];
if (rule instanceof RegExp) {
if (!rule.test(pw))
return "custom";
} else if (rule instanceof Function) {
if (!rule(pw))
return "custom";
}
}
};
$(document).ready(function() {
$("#ch_new_pw").off("focus").on("focus", function() {
var value = $(this).val();
$('.js-mytooltip-pw').myTooltip('updateContent', getPwContent(value));
});
$("#ch_new_pw").off("click").on("click", function() {
var value = $(this).val();
if(!isNull(value)) {
$('.js-mytooltip-pw').myTooltip('updateContent', getPwContent(value));
}
});
$("#ch_new_pw").off("keyup").on("keyup", function() {
$("#ch_new_pw").blur();
$("#ch_new_pw").focus();
});
//비밀번호 안정성 tooltip
$('.js-mytooltip-pw').myTooltip({
'offset': 30,
'theme': 'light',
'customClass': 'mytooltip-content',
'content':
'<p>t</p>'
});
});
</script>
4. 실행
1) 비밀번호를 6자리 미만으로 입력했을 경우
2) 숫자로만 이루어진 비밀번호일 경우
3) 숫자 or 영문 소문자 or 영문 대문자 or 특수문자 2가지 조합
4) 숫자 or 영문 소문자 or 영문 대문자 or 특수문자 3가지 조합
5) 숫자 or 영문 소문자 or 영문 대문자 or 특수문자 4가지 조합
'웹개발 > javascript' 카테고리의 다른 글
| [Javascript] object type JSON 변환 (0) | 2016.11.28 |
|---|---|
| [자바스크립트] 웹(Web) 크롬 디버깅(debugging) (0) | 2016.10.13 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Grunt
- End-to-End testing
- jQuery
- module exports
- NgForm
- git commit
- paralles desktop
- phone number
- Typescript 패키지
- npm
- angular2
- 아이오닉
- 번들링
- Gulp
- Routes
- 한영 변환
- 아이오닉2
- git branch
- 폼 유효성 검사
- Angular CLI
- 의존성 주입
- Facebook AccountKit
- ionic2
- password validation
- 옵저버블
- git merge
- 웹 소켓 프로토콜
- typeScript
- Webpack
- Angular
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함