[ JavaScript ] onblur 속성 사용해보기
2024. 5. 11. 14:21ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
- 바로 전 글에 대해 이어지는 내용이다 (https://ggingggang05.tistory.com/164)
onblur 속성으로 함수를 부르는 경우, 함수에 대한 처리를 바로바로 하는 것이 아닌, 사용자가 다 작성한 이후에 결과를 보여준다. 즉, 포커스를 잃을 때 이벤트가 발생하게 됩니다.
아래 내용은 이전 글과 이어지며, 단순히 onclick 속성을 onblur로 바꿔준 것이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</title>
<!-- 구글 폰트 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현할 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
/*
입력창에 대한 피드백 디자인
- 입력창 뒤에 피드백 영역이 있다면 판정결과에 따라 표시되도록 구현
*/
.tool.success {
border-color: #00b894 !important;
}
.tool.fail {
border-color: #d63031 !important;
}
.success-feedback {
color: #00b894;
display: none;
}
.fail-feedback,
.fail2-feedback,
.fail3-feedback {
color: #d63031;
display: none;
}
.tool.success ~ .success-feedback,
.tool.fail ~ .fail-feedback,
.tool.fail2 ~ .fail2-feedback,
.tool.fail3 ~ .fail3-feedback {
display: block;
}
</style>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
<script type="text/javascript">
function checkMemberId(){
//입력값 불러와서 검사한 뒤 출력
//입력
var inputTarget = document.querySelector("input[name=memberId]");
var memberId = inputTarget.value;
//검사
var regex = /^[a-z][a-z0-9]{7,19}$/;
var isValid = regex.test(memberId);
//출력 - 입력창에 검사 결과를 표시하고 나머지 처리는 연결되도록 구현
inputTarget.classList.remove("success", "fail");
if (isValid) {
inputTarget.classList.add("success");
}
else {
inputTarget.classList.add("fail");
}
}
function checkMemberPw(){
var inputTarget = document.querySelector("input[name=memberPw]");
var memberPw = inputTarget.value;
var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{6,15}$/;//긍정탐색
var isValid = regex.test(memberPw);
inputTarget.classList.remove("success", "fail");
inputTarget.classList.add(isValid ? "success" : "fail");
}
function checkMemberPwRe(){
var target1 = document.querySelector("[name=memberPw]");
var target2 = document.getElementById("pw-reinput");
var memberPw = target1.value; //비밀번호
var memberPw2 = target2.value; //비밀번호 확인
inputTarget.classList.remove("success", "fail", "fail2");
if(!memberPw) {
target2.classList.add("fail2");
}
else if(memberPw == memberPw2) {
target2.classList.add("success");
}
else {
target2.classList.add("fail2");
}
}
</script>
</head>
<body>
<form autocomplete="off" action="?" method="post">
<div class="container w-500">
<div class="cell center">
<h1>회원가입</h1>
</div>
<div class="cell">
<label>
아이디
<i class="fa-solid fa-asterisk red"></i>
</label>
<input type="text" name="memberId" onblur="checkMemberId();" placeholder="소문자 시작, 숫자 포함 8~20자" class="tool w-100">
<div class="success-feedback">멋진 아이디네요!</div>
<div class="fail-feedback">아이디는 소문자 시작, 숫자 포함 8~20자로 입력하세요</div>
</div>
<div class="cell">
<label>
비밀번호
<i class="fa-solid fa-asterisk red"></i>
</label>
<input type="password" name="memberPw" onblur="checkMemberPw();" placeholder="대소문자,숫자,특수문자 포함 6~15자" class="tool w-100">
<div class="success-feedback">비밀번호가 올바른 형식입니다.</div>
<div class="fail-feedback">비밀번호는 반드시 영문 대,소문자와 숫자, 특수문자가 포함되어야 합니다.</div>
</div>
<div class="cell">
<label>
비밀번호 확인
<i class="fa-solid fa-asterisk red"></i>
</label>
<!-- 비밀번호 확인은 백엔드로 전송되지 않도록 이름을 부여하지 않는다 -->
<input type="password" id="pw-reinput" placeholder="" onblur="checkMemberPwRe();" class="tool w-100">
<div class="success-feedback">비밀번호가 일치합니다.</div>
<div class="fail-feedback">비밀번호가 일치하지 않습니다.</div>
<div class="fail2-feedback">비밀번호를 먼저 입력하세요.</div>
</div>
<div class="cell">
<button class="btn positive w-100">
<i class="fa-solid fa-user"></i>
회원가입
</button>
</div>
</div>
</form>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| [ JavaScript ] 내장 객체 (0) | 2024.05.14 |
|---|---|
| [ JavaScript ] 로그인 화면에 폼 이벤트 추가 (0) | 2024.05.12 |
| [ JavaScript ] 회원가입 창 (일부) 만들기, 비밀번호 확인에 대한 심화 공부! (0) | 2024.05.10 |
| [ JavaScript ] 1000자까지만 입력되도록 막아보기 (0) | 2024.05.09 |
| [ JavaScript ] 입력에 대한 처리 및 문자열 검사 (0) | 2024.05.07 |