[ JavaScript / jQuery ] 조건 검사 하는 방법 (상태변수, 상태객체 사용)
2024. 5. 27. 18:13ㆍ· FRONT-END/└ JS
환경 : Visual Studio Code
[ 주요 코드 ]
- 해야할 일
1. 아이디 입력창에서 입력이 완료될 경우, 형식 검사하여 결과 기록
2. 비밀번호 입력창에서 입력이 완료될 경우, 형식 검사하여 결과 기록
3. 비밀번호 확인 입력창에서 입력이 완료될 경우, 비밀번호와 비교하여 결과 기록
4. form의 전송이 이루어질 때 모든 검사결과가 유효한지 판단하여 전송 여부 결정
- 상태 객체
//상태객체 (React의 stat로 개념이 이어짐)
// JS는 클래스가 없어서 객체를 바로 만들 수 있음
var state = {
//key : value
memberIdValid : false,
memberPwValid : false,
memberPwCheckValid : false,
//객체에 함수를 변수처럼 생성할 수 있다
// - this는 객체 자신(자바와 동일하지만 생략이 불가능)
ok : function(){
return this.memberIdValid && this.memberPwValid && this.memberPwCheckValid;
},
};(+) 상태객체를 만들어 필수 입력 요소인 아이디/비밀번호/비밀번호확인 변수의 값이 모두 true일 때만 액션이 일어나도록 하는 ok() 함수를 만들어 주었다.
(+) 이때, this를 꼭 표기 해줘야 한다
- 1. 아이디 형식 검사
//1. 아이디 입력창에서 입력이 완료될 경우, 형식 검사하여 결과 기록
$("[name=memberId]").on("blur", function(){
var regex = /^[a-z][a-z0-9]{7,19}$/;
state.memberIdValid = regex.test($(this).val());//기록이 밖에도 남게 됨.
$(this).removeClass("success fail").addClass(state.memberIdValid ? "success" : "fail");
});(+) 형식 검사의 결과를 state 객체의 memberIdValid 변수의 값으로 넣어준다
→ 이를 통해 함수 밖에도 값이 남게 된다.
- 2. 비밀번호 형식 검사
//2. 비밀번호 입력창에서 입력이 완료될 경우, 형식 검사하여 결과 기록
$("[name=memberPw]").on("blur", function(){
var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{6,15}$/;
state.memberPwValid = regex.test($(this).val());
$(this).removeClass("success fail").addClass(state.memberPwValid ? "success" : "fail");
});(+) 아이디와 동일
- 3. 비밀번호 확인
//3. 비밀번호 확인 입력창에서 입력이 완료될 경우, 비밀번호와 비교하여 결과 기록
$("#pw-reinput").on("blur", function(){
var memberPw = $("[name=memberPw]").val();
state.memberPwCheckValid = memberPw == $(this).val();
if(memberPw.length == 0) {
$(this).removeClass("success fail fail2").addClass("fail2");
}
$(this).removeClass("success fail fail2").addClass(state.memberPwCheckValid ? "success" : "fail");
});(+) 비밀번호 변수에 들어있는 값을 가져온다
(+) 비밀번호 변수와 현재 값(비밀번호 확인 변수 값)을 비교한 결과를 state 객체의 memberPwCheckValid 변수에 넣는다
(+) 단, 비밀번호 변수가 입력되지 않은 경우 비밀번호 확인이 필요하지 않는다.
→ 따라서, 비밀번호의 길이가 0 (값이 없으면)이면 확인하지 않도록 설정한다.
- 4. 전송!
//4. form의 전송이 이루어질 때 모든 검사결과가 유효한지 판단하여 전송 여부 결정
$(".check-form").submit(function(){
$("[name=memberId]").blur();
$("[name=memberPw]").blur();
$("#pw-reinput").blur();
return state.ok();
});(+) form 전송 시에는 미리 설정해둔 상태변수만 확인하면 된다 (장점!)
(+) 검사 효과까지 보고싶다면 blur이벤트를 강제로 발생시킨다
//- $(대상).trigger("blur") 또는 $(대상).blur()
// 강제 발생 시키는 이유는 마지막에 한 번 더 제대로 입력되었는지 확인하기 위함이다.
(추가) 상태 객체가 아닌 count 변수를 활용하기
// [2] .success 클래스의 개수를 카운트해서 통과시키는 방법
$(".check-form").submit(function(){
$("[name=memberId]").blur();
$("[name=memberPw]").blur();
$("#pw-reinput").blur();
$("[name=memberNick]").blur();
$("[name=memberEmail]").blur();
$("[name=memberBirth]").blur();
var cnt = 0;
$(".success").each(function(){
cnt++;
});
if(cnt == 6){
return true;
}else{
$(".btn").addClass("fail");
return false;
}
});(+) count 변수를 활용하여 필수 입력되어야 하는 항목들에 대한 카운트를 진행하고, 이를 if-else문을 활용하여 결과값을 반한하도록 한다.
→ 상태객체를 보관하지 않아도 된다는 장점이 있다.
[ 전체 코드 ]
<!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>
</style>
<!-- jquery cdn -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<!-- 내가 만든 스크립트 추가(jQuery를 사용했으니 jQuery CDN 아래 작성) -->
<script src="commons.js"></script>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현 -->
<script type="text/javascript">
$(function(){
/* 해야할 일
1. 아이디 입력창에서 입력이 완료될 경우, 형식 검사하여 결과 기록
2. 비밀번호 입력창에서 입력이 완료될 경우, 형식 검사하여 결과 기록
3. 비밀번호 확인 입력창에서 입력이 완료될 경우, 비밀번호와 비교하여 결과 기록
4. form의 전송이 이루어질 때 모든 검사결과가 유효한지 판단하여 전송 여부 결정
*/
//상태객체 (React의 stat로 개념이 이어짐)
// JS는 클래스가 없어서 객체를 바로 만들 수 있음
var state = {
//key : value
memberIdValid : false,
memberPwValid : false,
memberPwCheckValid : false,
//객체에 함수를 변수처럼 생성할 수 있다
// - this는 객체 자신(자바와 동일하지만 생략이 불가능)
ok : function(){
return this.memberIdValid && this.memberPwValid && this.memberPwCheckValid;
},
};
//상태변수 (React의 state로 개념이 이어짐)
// var memberIdValid = false;
// var memberPwValid = false;
// var memberPwCheckValid = false;
//1.
$("[name=memberId]").on("blur", function(){
var regex = /^[a-z][a-z0-9]{7,19}$/;
state.memberIdValid = regex.test($(this).val());//기록이 밖에도 남게 됨.
$(this).removeClass("success fail").addClass(state.memberIdValid ? "success" : "fail");
});
//2.
$("[name=memberPw]").on("blur", function(){
var regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$])[A-Za-z0-9!@#$]{6,15}$/;
state.memberPwValid = regex.test($(this).val());
$(this).removeClass("success fail").addClass(state.memberPwValid ? "success" : "fail");
});
//3.
$("#pw-reinput").on("blur", function(){
var memberPw = $("[name=memberPw]").val();
state.memberPwCheckValid = memberPw == $(this).val();
if(memberPw.length == 0) {
$(this).removeClass("success fail fail2").addClass("fail2");
}
$(this).removeClass("success fail fail2").addClass(state.memberPwCheckValid ? "success" : "fail");
});
//4.
//form 전송 시에는 미리 설정해둔 상태변수만 확인하면 된다
//- 검사 효과까지 보고싶다면 blur이벤트를 강제로 발생시킨다
//- $(대상).trigger("blur") 또는 $(대상).blur()
$(".check-form").submit(function(){
//$("[name=memberId]").on("input");
//$("[name=memberPw]").on("input");
//$("#pw-reinput").on("input");
$("[name=memberId]").blur();
$("[name=memberPw]").blur();
$("#pw-reinput").blur();
// console.log(memberIdValid, memberPwValid, memberPwCheckValid);
// return false; //전송 방지
// return memberIdValid && memberPwValid && memberPwCheckValid;
return state.ok();
});
});
</script>
</head>
<body>
<form autocomplete="off" action="?" method="post" class="check-form">
<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" 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" 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="" 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 / jQuery ] 표시 제어 (0) | 2024.05.29 |
|---|---|
| [ JavaScript / jQuery ] 체크박스 모듈 만들기 (1) | 2024.05.28 |
| [ JavaScript / jQuery ] 필수항목 검사 (0) | 2024.05.26 |
| [ JavaScript / jQuery ] alert 창의 값 여부에 따라 페이지 이동 구현 (0) | 2024.05.25 |
| [ JavaScript / jQuery ] jQuery를 활용하여 같은 틀을 여러 번 반복해서 사용할 수 있는 코드를 작성해보자 (0) | 2024.05.24 |