유효성 검사 (form validation)
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<h1>회원 가입</h1>
<fieldset>
<label>아이디</label>
<input type="text" id="username">
</fieldset>
<fieldset>
<label>비밀번호</label>
<input type="password">
</fieldset>
<fieldset>
<label>비밀번호 확인</label>
<input type="password">
</fieldset>
<fieldset>
<button>회원 가입</button>
</fieldset>
<script src="./test.js" />
</body>
</html>
test.js 에서 시작 (빈 파일 부터)
document.querySelector 로 element 가져오기
let elInputUsername = document.querySelector('#username')
console.log(elInputUsername)
input tag의 값 value
elInputUsername.value
elInputUsername.value = 'alskfl'
console에서 직접 바꾸기도 가능
경우에 따라 보여줄 내용 (HTML)
- ID의 글자 수가 부족할 때
= "아이디는 네 글자 이상이어야 합니다" - 적절한 ID일 때
= "사용할 수 있는 아이디입니다"
<div class="fail-msg">아이디는 네 글자 이상이어야 합니다</div>
<div class="succ-msg">사용할 수 있는 아이디입니다</div>
일단 다 작성하고
실제 보여지는 내용은 js 파일에서 조정
DOM 조정 (JavaScript)
안 보여지게 하는 방법
= CSS 속성을 바로 부여 : .style.display = 'none'
let elFailMsg = document.querySelector('.fail-msg')
console.log(elFailMsg)
elFailMsg.style.display = 'none'
실제 자주 사용하는 방법
= css 파일에서 class에 따라 보여질 지를 지정
css 파일 연결
test.html
<!-- <head> 마지막 부분에 추가 -->
<link rel="stylesheet" href="./style.css">style.css
= class 가 hide면 보이지 않게 함
.hide {
display: none;
}처음부터 메시지를 보이면 안 되기 때문에
메시지 div 들에 class hide 부여
test.html
...
<div class="fail-msg hide">아이디는 네 글자 이상이어야 합니다</div>
<div class="succ-msg hide">사용할 수 있는 아이디입니다</div>
...
입력할 때 그 내용이 적절한 ID냐 아니냐에 따라
보일 메시지를 다르게 함
= class를 조절 : classList.add classList.add
관심사 분리
이어서...
항상배우기