유효성검사?
회원가입 과정을 거칠 때,
사이트에서 원하는 조건에 맞게 반드시 형식을 맞춰 입력해야 하는 경우가 생긴다.
예를 들어,
- 특정 값은 반드시 입력해야 합니다. (아이디, 이메일, 비밀번호, 이름, 전화번호 등)
- 비밀번호는 n 자릿수 이상이어야 하고, 숫자나 특수문자를 반드시 포함해야 합니다.
- 비밀번호와 비밀번호 확인란에 입력된 문자가 동일해야 합니다.
- 신용카드의 경우, 입력한 신용카드의 번호가 유효해야 합니다.
이런 기능을 "유효성 검사"(Form validation)라고 부른다.
유효성 검사의 목표는 회원 가입이라는 핵심 기능에 대해, 작동이 가능한 MVP(Minimum Viable Product)를 만들어 내는 것이다.
유효성검사 전 알아야 할 개념들
다음번 포스팅 할 때 쓸 예정이지만,
유효성 검사를 하기 위해 알아야 할 개념들이 있다.
- querySelector를 활용하여, HTML 엘리먼트 정보를 가져온다.
- oncilck, onkeyup 속성이나 addEventListener 메서드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용한다.
- 이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인한다.
- 이벤트 핸들러 함수로 유효성 검사를 실행한다.
- 엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none)
우리가 확인해야 할 유효성검사는,
아이디가 네글자 이상인지?
비밀번호창과 비밀번호확인창의 text가 같은지?
회원가입완료버튼을 눌렀을 때 아이디창,비밀번호창,비밀번호확인창이 모두 입력되었는지?
index html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>유효성 검사</title>
</head>
<body>
<img
src="https://phoneky.co.uk/thumbs/screensavers/down/nature/animatedsn_vk9jw96f.gif"
/>
<div class="login">
<h1>회원가입</h1>
<input type="text" id="username" placeholder="아이디" />
<div class="success-message hide font">사용할 수 있는 아이디입니다</div>
<div class="failure-message hide font">
아이디는 네 글자 이상이어야 합니다
</div>
<input type="password" id="password" placeholder="비밀번호" />
<input
type="password"
id="password-retype"
placeholder="비밀번호 확인"
/>
<div class="mismatch-message hide font">비밀번호가 일치하지 않습니다</div>
<button>회원가입 완료</button>
<div class="required-message hide font">
모든 입력창을 입력하셔야 합니다
</div>
</div>
<script src="script.js"></script>
</body>
</html>script.js 코드
//querySelector를 활용하여, HTML 엘리먼트 정보를 가져온다.
const username = document.querySelector("#username");
const password = document.querySelector("#password");
const passwordRetype = document.querySelector("#password-retype");
const button = document.querySelector("button");
const successMessage = document.querySelector(".success-message");
const failureMessage = document.querySelector(".failure-message");
const mismatchMessage = document.querySelector(".mismatch-message");
const requiredMessage = document.querySelector(".required-message");
//~할 때라는 것은 event, event에 따라 실행되는 함수는 eventhandler
//아이디 입력창(username)에 글자를 키보드로 입력할 때(onkeyup),
//글자수가 4개이상이면(isMoreThan4Length 함수 사용)
//"사용할 수 있는 아이디입니다"가 메시지로 출력된다.
//글자수가 4개이하라면
//"아이디는 네 글자 이상이어야 합니다"가 메시지로 출력된다.
//[비밀번호 확인] 입력창에서 값을 입력(keyup)하면
//[비밀번호] 값과 [비밀번호 확인] 값이 일치하는지 확인하고,(isMatch 함수 사용)
//일치하지 않은 경우, 불일치 메시지를 화면에 표시한다.
//"비밀번호가 일치하지 않습니다" 메시지 출력
//일치하다면 출력하지 않기
//회원가입 완료 버튼을 눌렀을 때
//아직 입력하지 않은 곳이 있다면 "모든 입력창을 입력하셔야 합니다"라는 메시지 출력
username.onkeyup = function(){ //이 함수는 eventhandler
if(isMoreThan4Length(username.value)){
//css창에서 .hide{display:none;}이 기본값
successMessage.classList.remove("hide");
failureMessage.classList.add("hide");
}
else{
failureMessage.classList.remove("hide");
successMessage.classList.add("hide");
}
}
function isMoreThan4Length(value){ //value값이 4글자이상이면 true반환
return value.length >=4
}
passwordRetype.onkeyup = function(){
if(isMatch(password.value,passwordRetype.value)){
//패스워드 2개가 같다면 true반환으로 아래 코드가 실행됨
mismatchMessage.classList.add("hide");
}
else{//패스워드 2개가 다르다면 false반환으로 아래 코드가 실행됨
mismatchMessage.classList.remove("hide");
}
}
//isMatch함수사용하기
function isMatch(password1, password2){//패스워드 2개가 같다면 true반환
if(password1===password2){
return true;
}
return false;
}
button.onclick = function(){ //버튼을 클릭했을 때 모든 입력창이 빈곳이 없다면
if(username.value !== "" && password.value !== "" && passwordRetype.value !== "" ){//메시지 숨기기
requiredMessage.classList.add("hide");
}
else{//빈곳이 한곳이라도 있다면 메시지 보여주기
requiredMessage.classList.remove("hide");}
}style.css 코드
body{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
background-color: rgba(178, 214, 243, 0.5);
color: white;
font-weight: lighter;
}
img{
width:95%;
height: 100%;
margin-top: 50px;
}
.login{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: none;
padding: 0px 30px 20px 30px;
border-radius: 10px;
position: absolute;
box-shadow: 0px 40px 100px 30px rgba(0,0,0,0.4);
}
input, button{
margin-top: 5px;
margin-bottom: 5px;
padding: 8px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.7);
}
button{
width:150px;
}
button:hover{
cursor: pointer;
}
.font{
font-size: 10px;
background-color: rgba(0,0,0,0.2);
padding: 1px;
}
.hide{
display: none;
}advanced
eventhandler(이벤트함수)를 쓰는 법
버튼을 클릭할 때 발생하는 함수를 만들고 싶을 때 방법이 여러가지가 있다.
함수 선언식이/표현식에 따라 다르게 써도 상관없고,
btn.onclick / btn.addEventListener('click', function) 해도 상관없다.
btn.onclick = function() {
console.log('버튼이 눌렸습니다!');
}btn.addEventListener('click', function() {
console.log('버튼이 눌렸습니다!');
});function handler() {
console.log('버튼이 눌렸습니다!');
}
btn.onclick = handler;관심사 분리?
자바스크립트를 이용해 스타일을 직접 조작할 수도 있지만,
CSS 클래스를 이용해서 간접적으로 바꾸는 것을 권장하는데 그 이유는,
"관심사분리" 때문이다.
- 디자인의 디테일한 요소가 자바스크립트 코드에 담기는 것을 방지하기 위해
- 따로 클래스를 이용하면, 해당 디자인을 디자이너가 쉽게 바꿀 수 있기 때문에
- CSS는 디자인, 자바스크립트는 로직에 집중할 수 있게 하기 위해
신입 프론트엔드 웹 개발자입니다.
가독성 좋고 이해하기 쉽게 잘 정리된 글이네요!
좋은 정보 감사합니다ㅎㅎ