반응형
<tr>
<th scope="row"><img src="/resources/client/images/board/bg_vital.png" alt=""> <label for="userPw">비밀번호</label></th>
<td class="one">
<input type="password" id="userPw" name="userPw" title="비밀번호를 입력하세요." class="half" />
<span id="userpwdtext" class="td-tip"></span>
</td>
</tr>
<tr>
<th scope="row"><img src="/resources/client/images/board/bg_vital.png" alt=""> <label for="userPw_chk">비밀번호 확인</label></th>
<td class="one">
<input type="password" id="userPw_chk" title="비밀번호를 다시 입력하세요." class="half"/>
<span id="reuserpwdtext" class="td-tip"></span>
</td>
</tr>
$(document).ready(function () {
$("#userPw").keyup(function () {
var f = document.cForm;
if(f.userPw.value.length < 1){
$("#userpwdtext").css("color","red").text("비밀번호를 입력해 주세요.");
return;
}else{
var varObj = f.userPw.value;
var Obj = varObj.split(" ").join("");
var regPwd = /^(?=.*[a-zA-Z])((?=.*\d)|(?=.*\W)).{6,20}$/;
//조건1. 6~20 영문 대소문자
//조건2. 최소 1개의 숫자 혹은 특수 문자를 포함해야 함
if(!regPwd.test(varObj)) {
$("#userpwdtext").css("color","red").text("비밀번호는 영문/숫자/특수문자(!@#$%^*+=-)조합하여 6~12자 이어야 합니다.");
return;
}else{
$("#userpwdtext").css("color","green").text("안전한 비밀번호입니다. 사용 가능합니다.");
}
if(f.userPw.value != f.userPw_chk.value){
$("#reuserpwdtext").css("color","red").text("상위 비밀번호와 일치하지 않습니다.");
return;
}else{
$("#reuserpwdtext").css("color","green").text("상위 비밀번호랑 일치합니다.");
return;
}
}
});
$("#userPw_chk").keyup(function () {
var f = document.cForm;
if(f.userPw_chk.value.length < 1){
$("#reuserpwdtext").css("color","red").text("비밀번호를 정확히 입력해 주세요.");
return;
}
if(f.userPw.value != f.userPw_chk.value){
$("#reuserpwdtext").css("color","red").text("상위 비밀번호와 일치하지 않습니다.");
return;
}else{
$("#reuserpwdtext").css("color","green").text("상위 비밀번호랑 일치합니다.");
return;
}
});
});
반응형
'Frontend > Javascript' 카테고리의 다른 글
cors jsonp 형식으로 ajax 처리하기 (0) | 2020.07.18 |
---|---|
Browser OS Check By Easy Version (0) | 2020.05.22 |
new Date or timestamp -> "YYYY-MM-DD HH:ii:ss" 만들기 (0) | 2020.05.10 |
JS Redux (0) | 2020.05.05 |
Javascript Key Trigger Event (0) | 2020.04.24 |