Input 태그 이용하여 사용자가 입력할 수 있도록 할 때 Pattern validation 하는 방법에 대해 알아보자.
input 양식 확인
required
이 속성을 갖고있는 요소에 데이터를 입력하지 않으면 “이 필드는 필수입니다”과 같은 오류 문구가 표시된다.
minlength & maxlength
이 속성을 갖고있는 요소에 데이터를 속성값에 충족되게 작성하지 않으면 “문자 수는 *자에서 *자 사이여야 합니다.”와 같은 오류 문구가 표시된다.
min & max
이 속성을 갖고있는 요소에 데이터를 속성값에 충족되게 작성하지 않으면 “숫자의 크기는 *에서 * 사이여야 합니다.”와 같은 오류 문구가 표시된다.
type
이 속성을 갖고있는 요소에 데이터를 속성값에 충족되게 작성하지 않으면 아래와 같은 오류 문구가 표시된다.
<input type="email"> : 유효한 이메일 주소를 입력하십시오.
<input type="tel"> : 전화 번호를 xxx-xxxx 형식으로 입력하십시오.
<input type="email">, <input type="tel">과 같이 기본 유효성이 있는 태그들의 경우 기본 유효성에 추가로 더 패턴을 지정하여 유효성을 확인할 수 있다.
pattern
양식을 지정할 때는 문자 클래스와 정규식을 참고하여 양식을 지정한다.
여기서 알아본 Pattern validation은 클라이언트사이드에서 양식을 확인하는 방법이다.
그러나 서버사이드에서 최종 확인을 해야하다.
<input type="password">에 암호 입력시 8자리 이상 50자리 이하, 영어 대문자, 소문자, 숫자, 특수문자 포함 조건식 : <input type="password" name="passwd" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_-+=[]{}~?:;`|/]).{8,50}$">
참고
