VeeValidate는 제가 가장 좋다고 생각하는 JS Validation 라이브러리입니다. Vue.js에서 사용하는 툴입니다.
VeeValidate에는 4가지 검증 모드가 있습니다. 그런데 공식 문서의 설명이 그리 직관적으로 느껴지지는 않아서 좀더 이해하기 쉽게 정리해 봤습니다.
1. aggressive 모드
- 기본 동작: Aggressive 모드는 VeeValidate의 기본 모드입니다.
- 특징: 이 모드에서는 사용자가 입력을 할 때마다 (
input이벤트 발생 시) 유효성을 검사합니다. - 적합한 상황: 실시간 피드백이 중요한 상황, 예를 들어 실시간 데이터 처리나 사용자 입력 오류를 즉시 잡아내야 하는 경우에 적합합니다.
- 단점: 입력이 끝나지도 않았는데 틀렸다고 에러 메시지를 뿜기 때문에 사용자 입장에서는 좀 정신없을 수 있습니다. 심한 경우 놀랄 수도 있습니다.
2. passive 모드
- 동작 방식: Passive 모드는 자동 유효성 검사를 수행하지 않습니다. 즉, 수동으로 검증해야 에러 메시지가 표시됩니다.
- 적합한 상황: 사용자가 폼을 완전히 작성한 후 일괄적으로 오류를 확인하길 원하는 경우에 적합합니다. 사용자 제어가 중요한 상황에서 유용합니다.
혹은 개발자가 유효성 검사를 완전히 커스터마이징하는 경우에 필요합니다.
3. lazy 모드
- 동작 방식: 값이 변경되었을 때(
change이벤트) 또는 단순히 필드를 벗어났을 때(blur이벤트) 유효성을 검사합니다. - 장점: 사용자가 입력하는 동안 계속해서 오류 메시지가 변경되는 것을 방지하여, 사용자 경험을 개선합니다. passive와 달리 필드 하나마다 피드백을 주기 때문에 즉각적인 수정을 할 수 있도록 돕습니다.
- 적합한 상황: 사용자가 각 필드에 집중하여 입력하고, 입력을 마친 후에 즉시 피드백을 받길 원할 때 적합합니다.
4. eager 모드
- 혼합 동작: Eager 모드는 Aggressive와 Lazy 모드의 혼합입니다.
- 특징: 유효한 필드 또는 아직 상호작용하지 않은 필드는
change이벤트에서 검증됩니다. 필드가 유효않아 에러가 뜬 상태라면, 필드가 다시 유효해질 때까지input이벤트가 발생할 때 검증합니다. 즉, 사용자가 입력을 제대로 하는 순간 에러 메시지가 사라지게 됩니다. - 적합한 상황: 입력할 때는 사용자가 정신없기를 원하지 않지만, 틀린 것을 복구할 때는 곧장 피드백을 주고 싶은 상황에 적합합니다.
추천 모드
각 입력 모드가 각기 필요한 경우가 있을 겁니다. 그럼에도 저는 aggressive 모드는 그리 마음에 들지 않습니다. 입력을 다 하기도 전에 난리를 치니까요.
저는 eager 모드를 선호합니다.
검증 과정을 완전히 커스터마이징하는 경우에는 passive 모드를 골라야겠지요.
아래는 이해를 돕는 동영상입니다.
댓글 남기기