HTML5 + JavaScript Validation 유효성 검사 (샘플 코드)
HTML5 이후로 Form Validation이 강화되어 이전보다 훨씬 간단하면서도 효율적인 코드 작성이 가능해졌습니다. 하지만 각 브라우저 마다 약간 다른 동작을 할 수 있어, 테스트후 JavaScript로 보완해 주어야 하는 경우가 있을 수 있습니다.
그리고 이건 당연하지만 DB에 있는 데이터와 대조해 봐야 유효성을 담보할 수 있는 경우에는 별도의 서버 사이드(백 엔드) 작업이 필요합니다.
이 글에서는 사용자가 입력한 데이터를 100% 완벽하게 검사한다는 측면보다는 사용자 입력의 보조 역할과 일정 정도의 효율적인 데이터 유효성 검사를 수행하는 코드를 소개하려고 합니다🙂
HTML5 + JavaScript Validation 샘플 코드
CSS, HTML, JavaScript 코드 설명
CSS 코드
, :invalid는 데이터 유효성(validation) 검사에 실패한 경우에 해당하는 가상 클래스(pseudo-class)입니다. 가상 클래스에는 누구나 알 법한 :hover 등이 있습니다. 반대로 Validation 검사에서 성공한 경우는 :valid를 사용합니다.:invalid와 :valid는 입력란에 있는 현재의 값이 허용된 범위내에 있는지 사용자에게 시각적으로 도드라지게 보여주는데 사용하면 유용합니다.
HTML 코드
를 보시면 pattern 속성이 눈에 뜨일 것입니다. 값으로 Validation 검사에 사용될 '정규 표현식'을 지정하면 되는데, 정규 표현식이 처음이라면 어려워 보일 수도 있습니다만 막상 조합해서 만들어 보면 그리 어렵지 않습니다. 그리고 개발자로서 정규 표현식은 언젠가 한 번은 짚고 넘어가야 하는 부분입니다.정규 표현식의 문법은 여기📚를 참고하세요. 거기에서 '정규식에서의 특수문자' 표를 보세요. 잘 정리되어 있어 매번 찾게 되더군요.
그리고 type="tel"이라는 코드가 있는데, tel 타입은 email 타입(type="email")처럼 미리 정해진 형식으로 유효성 검사를 자동으로 해 주는 것은 아닙니다. 잠시 생각해 보면, 전화번호 형식은 너무 다양해서 일률적으로 적용할 수 없는 게 그 이유인 것 같습니다.
그럼에도 일반적인 text 타입이 아닌 tel 타입을 사용하는 이유는 모바일 브라우저로 접속해 보면 알 수 있습니다. 입력란을 탭하면 전화번호를 입력하기에 편리한 숫자 키패드가 나오죠? 데이터 유효성 검사는 pattern 속성으로 컨트롤해야겠네요.
댓글
댓글 쓰기