텍스트 인풋 박스 유효성 체크 방식(실시간 유효성 체크 vs 액션 유효성 체크)

 

 

image by freepik

텍스트 인풋 박스에 텍스트 입력 시 필요한 유효성 체크 방식에 대해 알아보자.

대부분 앱/웹 서비스를 기획 시 유효한 데이터인지 검사하는 기획은 필수이다. 유효성 검사란 텍스트 인풋 박스에 입력한 텍스트가 데이터적으로 유효한지 검사하는 걸 뜻한다.

29cm 로그인 페이지

텍스트 인풋 박스란?

해당 로그인 페이지에서의 텍스트 인풋 박스는 아이디 및 비밀번호 입력필드를 가리킨다.

유효성 검사하는 이유는? 

앞에서도 언급했다시피, 회원가입을 기획한다는 가정하에 아이디 입력 시 기존 가입한 아이디와 중복되지 않는지, 가입 아이디 조건에 맞는지 유효성을 따져봐야 한다. 유효성 검사 없이 회원가입을 진행할 경우에  중복아이디 이슈로 회원관리가 어렵거나 아이디 조건에 부합하지 않은 채 가입된 경우 해킹의 위험이 있어 정책상 중복아이디나 아이디 조건을 미리 정책으로 설정해야 한다. 이때 이미 존재하는 아이디를 입력한다거나, 아이디 or 비밀번호 조건에 부합하지 않는 경우 다음단계로 진행할 수 있음 or 없음을 나타내는 것이 바로 유효성 검사이다.

유효성 검사 종류에 대해 알아보자.

유효성 검사는 서버와 연결하여 유효성을 검사하느냐 안 하느냐에 따라 실시간 유효성 검사와 액션 유효성 검사로 나뉜다.

 

실시간 유효성 검사(쿠팡)>아이디입력란에 문자를 입력 후 이동한 경우 유효성 검사 메세지가 노출 됨

1. 실시간 유효성 검사
   실시간 유효성 검사는 서버와 연결 없이 유효성 검사를 한다는 것을 의미하여 텍스트 인풋 박스에 입력이 완료된 경우 바로 유효성 검사가 진행된다. 이런 탓에 보통 아이디 및 비밀번호 조건을 검사하는 경우가 많다.
   
   예: 비밀번호 조건 > 영문 및 숫자 8 자~12자 조합인 경우, 영문만 입력했을 때 어떤 액션 없이 바로 유효성 검사 메시지가 노출된다.'비밀번호는 영문 및 숫자 8 자~12자로 입력해야 합니다.'등
   
   
2. 액션 유효성 검사
   말 그대로 실시간 유효성 검사와 달리, 어떤 액션을 취해야 유효성 검사가 되는 것을 말한다. 예를 들어 로그인 시, 아이디와 비밀번호 모두 입력 후 로그인 버튼을 클릭(=액션) 했을 때 유효성 검사가 이루어지는 것이다.
   
   성공 시에는 로그인이 성공될 것이고
   실패 시에는 유효성 검사 메시지가 노출될 것이다. 예: 아이디와 비밀번호가 일치하지 않습니다. 등

로그인하기 터치 시 유효성 검사 메세지 노출(액션 유효성 검사)

 

실시간 유효성 검사와 액션 유효성 검사를 혼합해서 기획하기도 한다.

서버 연결 없이 가능한 실시간 유효성 검사(보통 아이디 및 비밀번호의 조건 검사)와 액션 유효성 검사(로그인 버튼 터치로 아이디와 비밀번호 부합이 맞는지)로 로그인 화면에서 두 가지를 혼용하여 유효성 검사를 하기도 한다.

 

유효성 검사 메시지 

로그인 화면의 실시간 유효성 검사, 액션 유효성 검사 기획