<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- jquery cdn -->
<!-- javascript 작성 공간 -->
<script>
$(function(){
//객체를 하나 만들어서 검사 결과를 저장
//- 검사 결과를 이곳에 저장
var status = {
id:false,
pw:false,
pwCheck:false,
ok:function(){
return this.id && this.pw && this.pwCheck;
},
};
//$("[name=memberId]").on("blur", function(){});
$("[name=memberId]").blur(function(){
var regex = /^[a-z][a-z0-9]{4,19}$/;
var isValid = regex.test($(this).val());
$(this).removeClass("success fail");
$(this).addClass(isValid ? "success" : "fail");
//검사 결과를 status에 저장
status.id = isValid;
});
$("[name=memberPw]").blur(function(){
var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{8,16}$/;
var isValid = regex.test($(this).val());
$(this).removeClass("success fail");
$(this).addClass(isValid ? "success" : "fail");
//검사 결과를 status에 저장
status.pw = isValid;
//비밀번호 확인창에 강제로 blur이벤트를 발생시킨다(트리건)
$("#password-check").blur();
});
$("#password-check").blur(function(){
var originPw = $("[name=memberPw]").val();
var checkPw = $(this).val();
$(this).removeClass("success fail fail2");
if(originPw.length == 0) {//비밀번호 미입력
$(this).addClass("fail2");
status.pwCheck = false;
}
else if(originPw == checkPw) {//비밀번호 일치
$(this).addClass("success");
status.pwCheck = true;
}
else {//비밀번호 불일치
$(this).addClass("fail");
status.pwCheck = false;
}
});
//form에 submit 이벤트를 설정
$(".join-form").submit(function(e){
//status를 확인
//console.table(status);
//console.log(status.ok());
if(status.ok() == false) {
e.preventDefault();
}
});
});
</script>
</head>
<body>
<form class="join-form" action="join" method="post" autocomplete="off">
<div class="container w-500">
<div class="row">
<h1>회원가입</h1>
</div>
<div class="row left">
<label>아이디</label>
<input type="text" name="memberId" class="form-input w-100">
<div class="success-feedback">멋진 아이디입니다!</div>
<div class="fail-feedback">아이디는 영문과 숫자 5~20자로 작성하세요</div>
</div>
<div class="row left">
<label>비밀번호</label>
<input type="password" name="memberPw" class="form-input w-100">
<div class="success-feedback">올바른 비밀번호 형식입니다!</div>
<div class="fail-feedback">비밀번호는 영문,숫자,특수문자를 반드시 포함하여 8~16자로 작성하세요</div>
</div>
<div class="row left">
<label>비밀번호 확인</label>
<input type="password" id="password-check" class="form-input w-100">
<div class="success-feedback">비밀번호가 일치합니다</div>
<div class="fail-feedback">비밀번호가 일치하지 않습니다</div>
<div class="fail2-feedback">비밀번호를 먼저 작성하세요</div>
</div>
<div class="row">
<button type="submit" class="btn btn-positive w-100">가입하기</button>
</div>
</div>
</form>
</body>
</html>