해당 글은 MDN의 Client-side form validation 을 보고 정리한 글입니다.

특정 사이트에 회원가입할 때 아래와 같은 회원가입 창을 마주하게 됩니다.
사용자가 많은 사이트라면, 아래와 같이 입력할 문자열을 제한할 조건이 붙어있습니다.

문자, 숫자, 마침표를 사용할 수 있습니다.
문자, 숫자, 기호를 조합하여 8자 이상을 사용하세요.

이것이 바로 form 유효성 검사입니다.

form 유효성 검사란?

form의 모든 입력값들이 올바른 형식이고 설정된 제약조건 내에 있는지 검사하는 것

사용자가 입력한 form을 서버에 데이터를 제출하기 전, form이 올바른 형식으로 채워졌는지 확인하는 것을 클라이언트 측 form 유효성 검사라고 합니다.
서버에서 수행되는 유효성 검사는 서버 측 form 유효성 검사라고 합니다.

이러한 유효성 검사를 통해 데이터가 불필요하게 왕래하며 발생하는 지연시간을 줄일 수 있습니다.
또한 잘못된 데이터로 인해 프로그램이 손상되는 것을 방지할 수 있습니다.

form 유효성 검사를 할 수 있는 방법은 HTML5 form 유효성 검사 기능을 사용하는 것과 JavaScript를 사용하여 유효성 검사하는 것 두가지가 있습니다.

HTML5 form 유효성 검사

HTML5를 사용하면 JavaScript에 의존하지 않고 대부분의 사용자 데이터를 검증할 수 있습니다.

다음과 같은 속성을 사용해서 유효성 검사를 할 수 있습니다.

• required : 무조건 채워야 되는 필드로 지정
• minlength, maxlength : 텍스트 데이터의 최소 및 최대 길이 지정
• min, max : 숫자 데이터의 최소값 및 최대값 지정
• type : 데이터의 유형 지정 (숫자, 이메일 주소, 비밀번호 등등)
• pattern : 데이터가 따라야 하는 패턴을 정의하는 정규식 지정

유효성 검사 관련 속성은 이 링크에서 확인할 수 있습니다.

요소가 위의 속성에 따른 조건을 충족할 경우 :valid 를 통해 CSS 스타일을 지정할 수 있고, 충족하지 못할 경우 :invalid 를 통해 지정할 수 있습니다.

아래와 같이 CSS 파일을 작성할 수 있습니다.

:valid {
	background-color: green;
}
:invalid {
	background-color: red;
}

사용 예시

<form>
  <label>Name: </label>
  <input name="name" required maxlength="16"/> <br>
  
  <label>Email: </label>
  <input name="email" type="email"/> <br>
  
  <label>Age: </label>
  <input name="age" min="1" /> <br>
  
  <label>Password: </label>
  <input name="password" type="password" required minlength="8"/> <br>
  
  <button>Submit</button>
</form>

JavaScript 유효성 검사

기본 오류 메시지의 모양을 제어하거나 HTML의 기본 제공 form 유효성 검사를 지원하지 않는 레거시 브라우저를 처리하려면 JavaScript를 사용해야 합니다.
JavaScript로 유효성 검사를 수행하는 방법은 다양합니다.

제약조건 검증 API 사용

대부분의 브라우저는 제약조건 검증 API(Constraint validation API)를 지원합니다.
제약조건 검증 API를 통해 Form 요소를 검증하는 메서드와 속성을 사용할 수 있습니다.

구체적인 사용방법과 자세한 내용은 Constraint validation API에서 확인할 수 있습니다.

API 없이 유효성 검사

레거시 브라우저를 지원해야 하거나 사용자 지원 컨트롤할 경우 제약조건 검증 API를 사용할 수 없습니다.
이런 경우 직접 JavaScript를 작성해서 유효성을 검사해야 합니다.
제약조건 검증 API를 사용할 때보다 더 많은 작업을 수행해야 합니다.

마치며

이와 같이 Form 유효성 검사 방법에 대해 알아봤습니다.
HTML5를 이용한 form 유효성 검사만 알고 있었는데 레거시 브라우저를 지원하려면 JavaScript를 통한 유효성 검사에 익숙해져야 할 것 같네요..