JavaScript로 실시간 검증 폼 만들기
발행: (2025년 12월 14일 오전 01:02 GMT+9)
4 min read
원문: Dev.to
Source: Dev.to
개요
폼은 어디에나 있습니다 — 로그인, 회원가입, 결제.
하지만 폼을 작성하고 오류를 확인하려면 제출해야만 하는 상황을 겪어본 적 있나요?
입력하면서 폼이 스스로 검증된다면 얼마나 좋을까요?
이 글에서는 순수 JavaScript와 가벼운 라이브러리 Signel.js(React, Vue, 무거운 프레임워크 없이)를 사용해 실시간 검증 폼을 만들어 보겠습니다. 아이디어는 다음과 같습니다:
- 모든 입력값이 사용자가 타이핑할 때마다 중앙 state 객체에 업데이트됩니다.
- 상태가 변경되면 검증 로직이 자동으로 실행됩니다.
- 오류 또는 메시지가 DOM에 즉시 반영됩니다.
HTML 구조
<!DOCTYPE html>
<html>
<head>
<title>Live validation form</title>
</head>
<body>
<div class="warning-box">
<label>Username</label>
<input class="username" type="text" />
<label>Password</label>
<input class="password" type="password" />
</div>
<div class="message">
$$message
</div>
</body>
</html>JavaScript 검증 로직
// Create reactive state bound to the .warning-box element
let data = el('.warning-box', {
username: "", // updated from .username input
password: "", // updated from .password input
message: "" // warning message displayed in the DOM
});
// Bind inputs to the state
input('.username', data, 'username');
input('.password', data, 'password');
// Validate username
watch(data, 'username', value => {
if (value.length 0) {
data.message = "Username must be at least 3 characters";
} else {
data.message = "";
}
});
// Validate password
watch(data, 'password', value => {
if (value.length 0) {
data.message = "Password must be at least 7 characters";
} else {
data.message = "";
}
});결과
전체 소스 코드
<!DOCTYPE html>
<html>
<head>
<title>Live validation form</title>
</head>
<body>
<div class="warning-box">
<label>Username</label>
<input class="username" type="text" />
<label>Password</label>
<input class="password" type="password" />
</div>
<div class="message">
$$message
</div>
<script>
let data = el('.warning-box', {
username: '',
password: '',
message: '',
});
input('.username', data, 'username');
input('.password', data, 'password');
watch(data, 'username', value => {
if (value.length 0) {
data.message = "Username must be at least 3 characters";
} else {
data.message = '';
}
});
watch(data, 'password', value => {
if (value.length 0) {
data.message = "Password must be at least 7 characters";
} else {
data.message = '';
}
});
</script>
</body>
</html>결론
이 글에서는 Signel.js를 사용해 실시간 검증 폼을 만들면서 다음을 배웠습니다:
- DOM 요소에 바인딩된 반응형 state 객체 만들기.
- 입력값을 자동으로 state에 연결하기.
- watcher를 이용해 실시간으로 검증 로직을 실행하기.
이 접근 방식은 가볍고 프레임워크에 의존하지 않으며, 작은 프로젝트나 반응형 라이브러리 내부 동작을 이해하는 데 적합합니다.
다음 단계
- 이메일 형식, 비밀번호 강도 등 더 많은 검증 규칙 추가하기.
- 반응형 리스트와 폼 검증을 결합해 todo 앱 만들기.
- watcher와 state가 다른 동적 UI를 어떻게 구동할 수 있는지 탐구하기.