HTML Forms

1. client-side form validation 이란?

  client-side form validation은 HTML form 요소와 관련하여, 데이터를 서버로 전송하기 전에 필요한 모든 form의 요소들이 적절한 형식으로 채워졌는지 확인하는 절차를 말합니다.

 

  최초 유효성 체크 과정이자, 이를 통해 사용자가 부정확한 입력을 하면 바로 그것이 잘못됐음을 알려주어 다시 입력할 수 있는 기회를 줄 수 있기 때문에 client-side의 잘 설계된 유효성 검사는 사용자 경험을 증진시킬 수 있습니다. 서버로 데이터가 전송된 뒤 그것이 잘못됐음을 사용자가 받아보려면 데이터가 오고가는 동안 눈에 띄는 시간 간격이 존재할 수 있기 때문입니다.

  하지만 이 과정은 악의적인 사용자가 우회하고자 한다면 쉽게 우회가 가능하기에 완벽한 보안 절차로서 생각하면 안됩니다. 그렇기 때문에 클라이언트 측은 물론 서버 측에서도 유효성 검사는 필수입니다. (브라우저가 유효성 검사를 하면 client-side validation, 서버에서 하면 server-side validation이라고 합니다.)

 

  이에 대해 사용자가 볼 수 있는 예시로는 “000 항목이 비어있습니다”, “이메일을 올바른 형식으로 입력해주세요”, “반드시 숫자/영문/특수기호를 포함해야합니다” 등이 있습니다.

 

2. 올바른 데이터를 입력받아야 하는 이유

2-1. 잘못된 형식의 데이터를 받으면 프로그램이 예상치 못한 방향으로 동작할 수 있습니다.

2-2. 복잡한 비밀번호 형식을 요구하거나 비밀번호 확인 절차를 요구함으로서 유저의 정보를 더욱 쉽게 보안적으로 관리할 수 있습니다.

2-3. 비인가된 데이터를 통해 프로그램에 문제를 야기하고 싶어하는 악의적인 유저로부터 프로그램을 보호할 수 있습니다.

 

3. 두 가지 다른 종류의 client-side validation

3-1. Built-in form validation

  HTML form 유효성 검사를 사용하며, 많은 Javascript 코드를 요구하지 않습니다. Javascript로 이루어진 유효성 검사보다 빠른 속도를 내지만, Javascript 유효성 검사보다 커스터마이징에서 자유롭지 않습니다.

3-2. Javascript validation

  Javascript 코드를 통해 유효성 검사를 합니다. 완벽히 커스텀이 가능하지만 라이브러리를 쓰거나 직접 만들어야 합니다.

 

 

4. Built-in form validation 사용

  최신의 form 컨트롤의 중요한 특징 중 하나는 대부분의 유저 데이터를 Javascript 코드 없이 유효성을 검사하는데에 있습니다.

 

  HTML Form 요소의 validation 속성을 사용합니다. 여기에 명시된 조건들을 충족해야 유효하다고 판단하게 됩니다.

 

<input required pattern="[a-z]{2,20}" type="text" maxlength="30" id="flower" name="flower">

 

required	제출 전에 반드시 채워져야할 부분에 대해서 명시
minlength / maxlength	문자열 데이터의 최소 / 최대 길이를 명시
min / max	숫자 데이터의 최소 / 최댓 값을 명시
type	숫자, 이메일, 특정 형식 등 입력되어야 하는 데이터 형식에 대해 명시
pattern	입력되는 데이터가 따라야할 패턴에 대해서 정규식을 통해 명시

 

  유효하다고 판단 될 때에는 :valid CSS 가상 클래스 선택자에 반응하고, 브라우저가 제출 가능하다고 판단합니다.

 

  유효하지 않다고 판단될 때에는 :invalid CSS 가상 클래스 선택자에 반응하고, 경우에 따라서 :out-of-rage 등 각각의 에러에 대응하는 가상 선택자에도 반응하도록 할 수 있습니다. 또한 제출시 브라우저가 제출을 막고 경고 문구를 띄웁니다.

 

5. Javascript validation 사용

  The Constraint Validation API 등 라이브러리를 사용하거나 커스텀된 에러 메시지 및 스타일 구현을 통해 직접 만들 수도 있습니다.