입력값 검증

Coddy HTML 여정의 JavaScript in Action 섹션에 포함된 레슨 — 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자 미만이면 테두리가 빨간색으로 변하고, 유효하면 초록색으로 변합니다.

챌린지

쉬움

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

여러분의 작업은 기존 <strong>if</strong> 블록 내부의 코드를 완성하여 다음을 수행하는 것입니다:

이메일에 "@"가 포함되어 있을 때,
입력창의 테두리(border)가 "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>