728x90
반응형
유효성 체크를 해봅시다.
1. 입력필드에 아무것도 넣지 않으면 > "이름을 입력하세요!!"
2. 입력필드에 입력한 글자수가 5 글자를 넘지 않으면 > "5글자 이상 채우세요!"
3. 입력필드에 입력한 글자수가 20자를 넘으면 > "너무 길게 입력했어요!"
라고 alert을 띄워보자.
1. 함수 부분을 건드려 봄
앞서 진행했던 것에서 먼저 글자수에 해당하는 loginInput.value를 변수로 할당한다.
const userName = loginInput.value;
그 다음 위 의 세 가지 경우의 수를 조건문으로 만들자.
if ( userName === ""){
alert ("Please insert your name!");
} else if (userName.length < 5){
alert ("Please fill at least over 5 characters!");
} else if (userName.length > 20){
alert ("It's too long to fill");
}
첫 번째 if문 userName에 아무것도 없을 때를 말한다.
두 번째 if문 userName의 length(길이)가 5 이하일 때를 말한다.
세 번째 if문 userName의 length(길이)가 20 이상일 때를 말한다.
이렇게 경고창이 뜨는 것을 확인할 수 있다.
2. 기본 브라우저에 있는 기능을 활용해 봄
이런 방식이 있고, html에서 미리 그 조건을 넣을 수 있다. 기본 브라우저에서 제공하는 기능을 활용하는 것이다.
html에서 다음과 같이 수정해보자
<body>
<form id="login-form">
<input
required
maxlength="20"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value = "Log in">
</form>
<script src="app.js"></script>
</body>
<div>로 묶여있던 input그룹을 form으로 바꿔줬다.
form 형식은 내용을 입력하면 자동으로 브라우저에서 submit해주는 기능을 한다.
<button>으로 되어있던 부분도 또 다른 input으로 처리했다.
이렇게 해서 키보드의 enter키로도 입력과 submit을 해주고 있다.
.js에서의 함수는 필요가 없어지므로 내용을 삭제해준다.
alert 대신 도움말이 뜨는 것을 확인할 수 있다.
그러면서 submit이 일어나면서 브라우저가 reflesh되고 있는 걸 볼 수 있다.
BR. h
728x90
반응형
'Javascript: to do list' 카테고리의 다른 글
| 18 Local Storage에 저장하기 (0) | 2023.06.01 |
|---|---|
| 17 선택자 class와 id (0) | 2023.06.01 |
| 15 Log in 로그인 화면 만들기 (0) | 2023.06.01 |
| 14 ClassName과 ClassList의 차이 (0) | 2023.06.01 |
| 13 CSS로 Style 작성하기 기초 I (0) | 2023.06.01 |
