자바스크립트 DOM 폼 처리, 입력 값 가져오기와 유효성 검사

자바스크립트 DOM 폼 처리, 입력 값 가져오기와 유효성 검사

웹 개발에서 사용자 입력 폼을 처리하는 일은 매우 중요합니다. 자바스크립트를 사용하면 폼의 입력 값을 쉽게 가져오고, 유효성 검사를 통해 잘못된 입력을 방지할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 DOM에서 폼 데이터를 다루는 방법과 유효성 검사를 구현하는 기법을 알아보겠습니다.

 

 

목차

1. DOM에서 폼 요소 선택하기
2. 입력 값 가져오기
3. 기본 유효성 검사
4. 커스텀 유효성 검사
5. 실전 예제

 

1. DOM에서 폼 요소 선택하기

자바스크립트에서 폼 요소를 선택하는 방법은 매우 다양합니다. document.getElementById, document.getElementsByClassName, document.querySelector 등을 사용하여 폼 요소를 선택할 수 있습니다. 예를 들어, 아이디가 "myForm"인 폼을 선택하려면 다음과 같이 작성합니다.

const form = document.getElementById('myForm');

 

 

2. 입력 값 가져오기

선택한 폼 요소에서 입력 값을 가져오는 방법은 간단합니다. 예를 들어, 폼 안에 있는 입력 필드의 값을 가져오려면 다음과 같이 작성할 수 있습니다.

const inputValue = document.getElementById('inputField').value;

여기서 inputField는 입력 필드의 아이디입니다.

 

 

3. 기본 유효성 검사

HTML5에서는 기본적인 유효성 검사를 제공합니다. 예를 들어, 입력 필드에 required 속성을 추가하면 해당 필드는 반드시 입력되어야 합니다. 자바스크립트를 사용하여 폼의 기본 유효성 검사를 확인할 수도 있습니다.

if (!form.checkValidity()) {
    alert('폼을 올바르게 작성해주세요.');
}

 

 

4. 커스텀 유효성 검사

기본 유효성 검사 외에도 자바스크립트를 사용하여 커스텀 유효성 검사를 구현할 수 있습니다. 예를 들어, 이메일 형식을 확인하는 검사를 추가하려면 다음과 같이 작성할 수 있습니다.

const emailField = document.getElementById('email');
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailPattern.test(emailField.value)) {
    alert('유효한 이메일 주소를 입력해주세요.');
}

 

 

 

 

5. 실전 예제

아래는 폼의 입력 값을 가져오고, 기본 및 커스텀 유효성 검사를 수행하는 전체 예제입니다.

<form id="myForm">
    <input type="text" id="username" required>
    <input type="email" id="email" required>
    <button type="submit">제출</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    
    const form = event.target;
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!form.checkValidity()) {
        alert('폼을 올바르게 작성해주세요.');
        return;
    }

    if (!emailPattern.test(email)) {
        alert('유효한 이메일 주소를 입력해주세요.');
        return;
    }

    alert('폼이 성공적으로 제출되었습니다.');
});
</script>