자바스크립트 - 폼 검증: 초보자 가이드

안녕하세요, 열망하는 프로그래머 여러분! 오늘 우리는 자바스크립트 폼 검증의 흥미로운 세상으로 뛰어들어 보겠습니다. 프로그래밍을 가르치고 있는 지 오래된 저로서는 이것이 가장 실용적이고 중요한 기술 중 하나라고 말씀드릴 수 있습니다. 그麼, 시작해 보겠습니다!

JavaScript - Validations

폼 검증이란?

코드로 뛰어들기 전에, 폼 검증이 무엇이고 왜 중요한지 이해해 보겠습니다. 온라인으로 피자를 주문하는 폼을 작성하는 상상해 보세요. 실수로 1000개의 피자를 주문하는 것보다 1개를 주문하고 싶을 테죠? 이때 폼 검증이 나타나게 됩니다 - 사용자가 입력한 데이터가 정확하고 올바른 형식인지 확인합니다.

기본 폼 검증

1. 필드가 비어 있는지 확인

가장 기본적인 검증으로, 필드가 비어 있는지 확인해 보겠습니다. 다음은 간단한 예제입니다:

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("이름을 입력해야 합니다");
return false;
}
}

이 코드에서:

"fname" 필드의 값을 "myForm" 폼에서 가져옵니다.
값이 비어 있으면 (공백 문자열), 경고를 표시하고 false를 반환하여 폼이 제출되지 않도록 합니다.

2. 숫자 입력 검증

이제 필드에 숫자만 포함되도록 확인해 보겠습니다:

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("입력이 유효하지 않습니다");
return false;
}
}

이제 무엇이 일어나고 있는지 살펴보겠습니다:

"myNumber" ID를 가진 입력 필드의 값을 가져옵니다.
isNaN()을 사용하여 숫자가 아닌지 확인합니다.
또한 숫자가 1과 100 사이인지 확인합니다.
이 조건 중 하나가 참이면 경고를 표시하고 false를 반환합니다.

데이터 형식 검증

1. 이메일 검증

가장 흔한 검증 중 하나는 이메일 주소가 올바른 형식인지 확인하는 것입니다. 다음은 그 방법입니다:

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("유효한 이메일 주소를 입력해 주세요");
return false;
}
}

이 코드는 다음과 같은 내용을 포함합니다:

이메일 주소를 확인하기 위해 "myEmail" ID를 가진 입력 필드의 값을 가져옵니다.
정규 표현식(Regex)을 사용하여 이메일 형식을 확인합니다.

2. 날짜 검증

이제 날짜가 MM/DD/YYYY 형식인지 확인해 보겠습니다:

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("MM/DD/YYYY 형식으로 유효한 날짜를 입력해 주세요");
return false;
}
}

이 정규 표현식은 다음을 확인합니다:

월 (01-12)
뒤이어 '/'기호
일 (01-31)
또 다른 '/'기호
4자리 연도

이 정규 표현식은 형식을 확인하지만, 실제로 날짜가 유효한지는 확인하지 않습니다 (예: 2월 30일).

모든 것을 하나로 모음

이제 개별 검증을 보았으니, 그것들을 단일 폼으로 결합해 보겠습니다:

<form name="myForm" onsubmit="return validateForm()">
이름: <input type="text" name="fname"><br>
나이: <input type="text" id="myNumber"><br>
이메일: <input type="text" id="myEmail"><br>
날짜: <input type="text" id="myDate"><br>
<input type="submit" value="제출">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("이름을 입력해야 합니다");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("나이는 1에서 100 사이의 숫자여야 합니다");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("유효한 이메일 주소를 입력해 주세요");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("MM/DD/YYYY 형식으로 유효한 날짜를 입력해 주세요");
return false;
}
return true;
}
</script>

이 완전한 예제에서:

이름, 나이, 이메일, 날짜 필드가 있는 폼이 있습니다.
폼의 onsubmit 이벤트는 validateForm()을 호출합니다.
validateForm()은 모든 개별 검증 함수를 호출합니다.
어느 하나라도 검증에 실패하면 폼 제출이 방지됩니다.

결론

축하합니다! 지금까지 자바스크립트 폼 검증의 기본을 배웠습니다. 검증은 오류를 방지하는 것뿐만 아니라, 더 나은 사용자 경험을 만드는 것입니다. 프로그래밍 여정을 계속하면서, 폼을 더욱 사용자 친화적으로 만드는 많은 방법을 찾게 될 것입니다.

아래 표는 우리가 다룬 검증 방법의 요약입니다:

방법	목적	예제
빈 필드 확인	필수 필드가 채워졌는지 확인	`if (x == "")`
숫자 검증	입력이 숫자이고 범위 내에 있는지 확인	`if (isNaN(x) \|\| x < 1 \|\| x > 100)`
이메일 검증	이메일 형식을 확인	`if (!regex.test(email))`
날짜 형식 검증	날짜가 올바른 형식인지 확인	`if (!regex.test(date))`

계속 연습하면, 폼 검증 마법사가 될 것입니다! 모든 위대한 프로그래머는 여러분이 현재 있는 위치에서 시작했습니다. 행복하게 코딩하세요!

Credits: Image by storyset