[javascript] 입력 폼에서 입력값 유효성 검사하기

11 Dec 2023

javascript

입력 폼을 사용하는 웹 애플리케이션에서 사용자가 올바른 형식의 데이터를 입력했는지 확인하는 것은 매우 중요합니다. 이를 통해 데이터의 정확성과 보안을 유지할 수 있습니다. JavaScript를 사용하여 입력 폼에서 입력값의 유효성을 검사하는 방법에 대해 알아보겠습니다.

1. HTML 입력 폼 생성

우선, HTML을 사용하여 입력 폼을 생성합니다.

<form id="myForm">
    <input type="text" id="username" placeholder="사용자 이름">
    <input type="email" id="email" placeholder="이메일">
    <input type="password" id="password" placeholder="비밀번호">
    <button type="submit">제출</button>
</form>

2. JavaScript를 이용한 유효성 검사

다음으로, JavaScript를 사용하여 입력값을 유효성 검사합니다. 아래의 예제는 간단한 유효성 검사를 수행하는 방법을 보여줍니다.

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    
    let username = document.getElementById('username').value;
    let email = document.getElementById('email').value;
    let password = document.getElementById('password').value;
    
    if (username === '') {
        alert('사용자 이름을 입력해주세요.');
        return false;
    }
    
    // 이메일 유효성 검사
    let emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (!emailRegex.test(String(email).toLowerCase())) {
        alert('올바른 이메일 주소를 입력해주세요.');
        return false;
    }
    
    if (password.length < 8) {
        alert('비밀번호는 8자 이상이어야 합니다.');
        return false;
    }
    
    // 입력값이 유효한 경우 서버로 전송할 수 있도록 코드 작성
});

위의 JavaScript 코드는 submit 이벤트를 감지하여 입력값을 검사한 후, 유효하지 않은 경우에는 알림을 표시하고 폼의 제출을 방지합니다.

결론

입력 폼에서 입력값을 유효성을 검사하는 것은 보안과 데이터의 정확성을 유지하기 위해 매우 중요합니다. JavaScript를 사용하여 이를 구현할 수 있으며, 실제로 사용자로부터 올바른 형식의 데이터를 수신하기 위한 필수적인 단계입니다.

MDN Web Docs - Form validation

이제 웹 애플리케이션에서 입력값을 유효성 검사하여 안전하고 정확한 데이터를 확보하는 방법에 대해 이해하셨을 것입니다.