[javascript] Svelte에서 폼 검증(form validation)을 어떻게 할 수 있나요?
Svelte는 폼 검증을 쉽게 구현할 수 있는 강력한 기능을 제공합니다. 폼 검증을 위해 Svelte에서는 내장된 bind 디렉티브와 $set 메소드 등을 사용할 수 있습니다.
먼저, 폼 요소들을 상태 변수와 바인딩하기 위해 bind 디렉티브를 사용합니다. 이 디렉티브를 사용하면 입력된 값을 상태 변수에 자동으로 바인딩할 수 있습니다.
<script>
let name = '';
let email = '';
let password = '';
function handleSubmit() {
if (name.trim() === '' || email.trim() === '' || password.trim() === '') {
alert('모든 필드를 채워주세요.');
} else {
alert('폼이 제출되었습니다.');
}
}
</script>
<form on:submit|preventDefault={handleSubmit}>
<label for="name">이름:</label>
<input type="text" id="name" bind:value={name} required/>
<br/>
<label for="email">이메일:</label>
<input type="email" id="email" bind:value={email} required/>
<br/>
<label for="password">비밀번호:</label>
<input type="password" id="password" bind:value={password} required/>
<br/>
<button type="submit">제출</button>
</form>
위의 예시에서는 name, email, password 세 가지 필드를 폼으로 작성하였습니다. bind 디렉티브를 사용하여 각 폼 요소를 상태 변수에 바인딩하였습니다. 제출 버튼을 클릭하면 handleSubmit 함수가 실행되며, 폼이 제출되는지 여부를 확인합니다. 만약 어느 하나의 필드라도 비어있다면, 사용자에게 모든 필드를 채우라는 알림이 나타납니다.
물론 이 예시는 간단한 폼 검증 기능을 보여주기 위한 것이며, 실제로는 더욱 복잡한 폼 검증을 구현할 수 있습니다. 예를 들어, 정규 표현식을 사용하여 이메일 형식이 올바른지, 비밀번호가 일치하는지 등을 검증할 수 있습니다. 추가적인 폼 검증을 원한다면, handleSubmit 함수 내에서 필요한 검증 로직을 작성하면 됩니다.
Svelte에서는 다른 외부 라이브러리 없이도 유효성 검사 로직을 쉽게 작성할 수 있다는 점이 큰 장점입니다. 이 기능을 활용하여 폼 검증을 원하는 대부분의 경우를 처리할 수 있습니다.