<!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>Step02_Form3.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>회원가입폼</h1>
<form action="">
<div>
<label class = "form-label" for="id">아이디</label>
<input class = "form-control" type="text" id="id" name="id" placeholder = "아이디">
<div class = "invalid-feedback">
5 글자 이상 입력하세요!
</div>
<div class = "valid-feedback">
Looks good!
</div>
</div>
</form>
</div>
<script>
//아이디 입력란에 입력을 할때마다 호출되는 콜백함수 등록하기
document.querySelector("#id").addEventListener("input",(e)=>{
//1. 입력한 아이디를 읽어온다.
const inputId = e.target.value;
//const inputId2 = document.querySelector("#id").value;
//2. 아이디가 5글자 이상인지 여부를 판별한다.
const isIdValid = inputId.length >=5;
//3. 만일 5글자 이상이면 is-valid를 추가하고 is-invalid는 제거한다.
// 만일 5글자 미만이면 is-invalid를 추가하고 is-valid는 제거한다.
if(isIdValid){
e.target.classList.add("is-valid");
e.target.classList.remove("is-invalid");
}else{
e.target.classList.add("is-invalid");
e.target.classList.remove("is-valid");
}
});
</script>
</body>
</html>"input"은 event명
e 는 event 객체 활용
e.taget 은 event가 일어난 바로 그 요소의 참조값
inputId.length >= 5; 는 문자열의 길이 알아내기
e.target.classList.add("is-valid");
e.target.classList.remove("is-invalid"); 는 class 속성 추가, 제거
'오답노트' 카테고리의 다른 글
| 프로그래밍에서 오타를 주의해야하는 이유 (0) | 2023.05.31 |
|---|---|
| 비동기와 동기 함수 (0) | 2023.05.30 |
| CSS Param 사용방법 (0) | 2023.05.25 |
| MemberDao 코드리뷰 (0) | 2023.05.24 |
| JAVA DbcpBean (0) | 2023.05.24 |
댓글