form 제대로 사용하기

올바른 form 은 무엇일까요??? 간단한 회원가입을 만들어본다고 합시다. 반드시 건드려야 하는 부분들을 나열해 봅시다.

• 이름
  • 빈칸이면 안됨
  • 성과 이름 포함 2자 이상
  • 숫자가 들어와서는 안됨
• 나이
  • 빈칸이면 안됨
  • 최저 연령이 설정되어 있어야 함
  • 음수의 값이 들어오면 안됨
  • 문자가 들어와서는 안됨
• 아이디
  • 빈칸이면 안됨
  • 5글자 이상 10자 미만
  • 중복되면 안됨
  • 한글, 특수문자, 기호 모두 안됨
  • 영문과 숫자가 공존해야함
• 비밀번호
  • 빈칸이면 안됨
  • 8자 이상 16자 미만
  • 영어, 숫자, 특수문자가 한번씩은 사용되어야함
  • 대문자도 포함해야함
• 비밀번호 확인
  • 비밀번호가 가지고 있는 유효성 모두 함께 적용되어야 함
  • 비밀번호 값과 동일해야함

간단하게 서술하기만 해도 이정도인데, 실제 현업에서 쓰이는 회원가입 코드는 얼마나 방대하고, 복잡할까요?? 그리고 로직만 좋다고 끝일까요??? 사용자 경험을 반응하는 것도 매우 중요하겠네요.

• 제출했을 때 서버에 요청을 보내 유효성을 확인하는 영역
  • 모든 폼 데이터가 클라이언트 사이드의 유효성 검사를 통과되어있어야 한다.
  • 서버의 유효성 검사가 다시금 이루어진다.
  • 그외에도 아이디 중복체크에도 서버의 요청이 필요할 거 같다.
• 다른 입력창으로 포커스가 이동할 때 유효성을 확인하는 영역
  • 클라이언트 사이드 유효성 검사
• 키보드 스트로크 시 유효성을 확인하는 영역
  • 클라이언트 사이드 유효성 검사
  • 가장 즉각적인 피드백 가능