[chap.8] HTML Form Validation

1. Requiring an Input

늘 해오던 것에 required만 추가 되었다. 이 경우 꼭 빈칸을 채워야만 다음으로 넘어갈 수 있게 된다.

이처럼 type="number"도 가능!

설정한 answer값과 일치해야만 접근할 수 있게 만들기도 하는데, 이 부분은 javascript로 배워보자 

 

 

 

2. Checking text length

숫자처럼 character에도 길이 제한을 줄 수 있다

If a user tries to submit the <form> with less than the set minimum, this message appears:

And if a user tries to type in more than the maximum allowed number of characters, they don’t get a warning message, but they can’t type it in!

 

 

3. Matching a Pattern

text field에 입력할 수 있는 문자, 숫자를 좀 더 디테일하게 제한하기 위한 attribute

위의 예시는 카드번호를 요구하는 항목이라 pattern attribute를 이용해 [숫자만][14~16자리로]만 입력해서 submit할 수 있게 설정해놓았다. 

pattern = "[a-zA-Z]{n}" n개의 영문자를 입력한다. ( 소문자만은 a-z, 대문자만은 A-Z만 입력하면 된다)

pattern = "[0-9]{n}" n개의 숫자를 입력

pattern = "[A-Za-z0-9]{min,max}" 영문자와 숫자를 min~max까지 입력

pattern = "[0-9]+" 숫자를 1개 이상 입력

pattern = "\d[no]" 숫자를 no개 만큼 입력

 

 

form validation은 2가지가 있다

server-side validation 과 client-side validation

오늘 알아본 것은 후자!

빨리 공부해서 전체적으로 어떻게 굴러가는지 이해하고싶다