입력 유효성 검사

Coddy HTML 여정의 JavaScript 실전 섹션에 포함된 레슨. 27개 중 5번째.

폼을 만들 때는 사용자가 입력하는 동안 즉각적인 피드백을 제공하는 것이 중요합니다. 그래야 잘못된 정보를 제출하지 않습니다. 이를 실시간 유효성 검사라고 합니다.

먼저 기본 텍스트 입력 필드를 만들어 봅시다. 사용자 이름의 길이가 최소 5자인지 확인하려고 합니다.

<input type="text" id="username" placeholder="Enter username">

이제 사용자가 입력하는 동안 입력값을 검증하는 이벤트 리스너를 추가하세요:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    // 현재 값을 가져옵니다
    const value = this.value;
    
    // 기준을 충족하는지 확인합니다
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

사용자 이름이 5자 미만이면 테두리가 빨간색으로 바뀌고, 유효하면 초록색으로 바뀝니다.

챌린지

쉬움

이메일 입력 필드가 있는 페이지가 있습니다. 현재는 이메일 형식을 검증하지 않습니다.

기존 if 블록 안의 줄을 완성하는 것이 과제입니다. 이렇게 하려면:

이메일에 "@"가 포함되어 있을 때,
입력 필드의 테두리가 "2px solid rgb(0, 250, 0)"가 되도록 합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>