username 유효성 검사하기
우선적으로 username이 비어서도 안되고 너무 길어서도 안된다.
우리는 if, else문을 활용하여 username이 빈 인풋값인지 확인하고 15글자가 넘는지 확인하는 법을 알아볼 것이다.
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">
<link rel="stylesheet" href="style.css"/>
<title>Momentum App</title>
</head>
<body>
<!-- id : login-form, ID input and Button Create-->
<div id="login-form">
<input type="text" placeholder="Your name"/>
<button>Log In</button>
</div>
<!-- id : login-form, ID input and Button Create End-->
<!-- Js Begin -->
<script src="app.js"></script>
<!-- Js End -->
</body>
</html>
# JS로의 검사
먼저 자바스크립트로의 검사 코드이다.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick(){
// 매번 loginInput.value를 적는 것 대신 변수로 만들어서 활용한다.
const username = loginInput.value;
if(username === ""){ // 값이 없을 경우
alert("값을 입력하세요");
}
else if(username.length > 15){
// .length로 문자열 길이를 구할 수 있다.
alert("15자가 넘어갑니다.");
}
}
loginButton.addEventListener("click", onLoginBtnClick)개발자들에게 항상 필요한 것들이 존재한다. 무슨말이냐 classname을 제거하거나, 더하거나, string의 길이를 구하는 것을 뜻한다.
이러한 이유로 JavaScript에는 이미 우리를 위해 이런 것들이 필요할 때 언제든지 이용가능한 함수(js : object)들이 존재한다.
- 문자열 길이를 구하는 방법은 .length를 사용하면 된다.
이렇게 작업을 했지만 선호하는 방법이 아니라고 한다. 어떤 방법이 있을까
JS로만 작업할 시 해야하는 기능이지만 브라우저 자체의 기능을 사용할 수도 있다.
지금 이대로도 괜찮긴 한데 항상 user가 입력하는 값의 유효성을 확인하는 건 좋은 연습이다.
( 절대 user를 믿지말자... 절대... )
항상 최고의 툴을 사용해야 하고 이미 가지고 있는 기능들을 사용하는것이 좋다. (안정, 효율 검증)
예를 들어 HTML의 input 태그를 필수입력 항목으로 만들어 줄 수 있다.
이것은 HTML이 이미 우리를 위해 해주고 있다.
- required maxlength="15" 라는 것을 사용하면 HTML에 자동적으로 글자 길이를 제한해준다.
<input required maxlength="15" type="text" placeholder="Your name"/>
<button>Log In</button>
- 15글자 넘게 입력하면 막힌다.
이런 편한 기능을 사용할 수 있지만 문제는 Log In을 클릭할 때 HTML에서 확인 작업을 시행하고 있지 않는다는 점이다.
그 이유는 form이 아니기 때문이다.
input의 유효성 검사를 작동시키기 위해서는 input이 form 안에 있어야 된다.
html에 div가 있던 자리를 form으로 교체하고 이제 js 작업한 유효성 검사 코드를 지운다.
그리고 username을 아직 받는다는 것을 확인하기 위해 console.log(username)만 남겨놓자.
HTML 수정
<body>
<!-- form, id : login-form, ID input and Button Create-->
<form id="login-form">
<input required maxlength="15" type="text" placeholder="Your name"/>
<button>Log In</button>
</form>
<!-- form, id : login-form, ID input and Button Create End-->
<!-- Js Begin -->
<script src="app.js"></script>
<!-- Js End -->
</body>
자바스크립트 수정
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function onLoginBtnClick(){
// 매번 loginInput.value를 적는 것 대신 변수로 만들어서 활용한다.
const username = loginInput.value;
console.log(username);
}
loginButton.addEventListener("click", onLoginBtnClick)
실행
입력란을 입력하라는 브라우저의 기능이 우리를 돕고있는 걸 확인 가능하다.
최대길이 제한까지 완벽
그리고 입력 사항에 맞게 Log In 버튼을 클릭하면 URL에는 ?가 따라붙는 것을 볼 수 있다.
또한 웹사이트가 재시작 되고 있다.
이 이유는 form이 submit되고 있기 때문이다.
- input 안에 있는 button을 누르거나 type이 submit인 input을 클릭하면
- <input type="submit" value="Log In"/>
- 페이지가 submit되는 것을 확인 할 수있다.
- 이제 우리는 form을 submit하는것에 관심을 두면 된다.
- 그리고 브라우저를 새로고침하지 않고 user 정보를 저장하도록 해야한다.
- HTML의 도움을 받으려면 input을 form안에 위치시켜야 하는것을 기억하자.
- input을 form안에 넣었을 경우에 우리가 엔터를 누를때마다 form은 자동적으로 submit된다 하지만 이것은 원하는 동작이 아니다. 왜냐하면 form이 submit 될때마다 페이지는 새로고침이 되기 때문.
- 웹 페이지를 매번 새로고침하는건 조금 좋지 않다
결론적으로 form이 submit되는것을 막아주는 실습을 해볼 예정이다. (다음 포스팅)
'자바과정 > 자바스크립트' 카테고리의 다른 글
| 바닐라 자바스크립트 - Input과 Button (0) | 2021.09.24 |
|---|---|
| 바닐라 자바스크립트 - CSS와 JavaScript 분리하기 (0) | 2021.09.23 |
| 바닐라 자바스크립트 - Event listen하기 (0) | 2021.09.23 |
| 바닐라 자바스크립트 시작(3) (0) | 2021.09.23 |
| 바닐라 자바스크립트 시작 (2) (0) | 2021.09.08 |
댓글