서버로 데이터를 제출하기 전에 올바른 양식으로 작성했는지, 필수 입력 항목에 빈칸은
없는지 확인하는 것을 말합니다.
예를 들면, 회원가입을 하는 사이트에서 ID는 입력했는데 비밀번호를 입력하지 않고 제출
한다면, 유효성 검사를 통해 제출 요청이 취소됩니다.
유효성 검사에는 javascript
을 이용한 유효성 검사 방법과, HTML5
의 유효성 검사방법이
존재합니다.
input
요소의 required
속성을 사용해서 유효성 검사를 진행할 수 있습니다.
속성 | 내용 |
---|---|
required | 이 속성이 적용된 요소는 필수로 입력해야 합니다 |
min/max length | 최소/최대 글자수를 설정합니다. |
min/max | 숫자의 최소/최대값을 설정합니다. |
type | 입력받을 데이터 타입을 정합니다 |
pattern | 입력받을 데이터가 준수해야 할 정규 표현식을 설정합니다 |
<h2> Validations Demo </h2>
<form action="/root">
<label for="userid"> ID : </label>
<input type="text" name="uid" id="userid" required minlength="4" maxlength="20">
<br>
<label for="password"> PASSWORD : </label>
<input type="password" name="password" ID="password" required>
<br>
<label for="email"> Email : </label>
<input type="email" id="email" name="e-mail" required>
<br>
<label for="url"> url : </label>
<input type="url" id="url" name="url" required>
</form>
ID & PASSWORD
는 필수로 입력해야 하며, ID는 최소:4/최대:20 범위에 문자를 작성해야
합니다.
타입이 이메일인 요소는, 기본적으로 앞/뒤의 문자 사이에 @
기호를 사용해야 한다는
패턴이 매핑되어 있습니다.
이메일 타입과 마찬가지로, 타입이 URL인 요소 또한 기본적으로 패턴이 매핑되어 있습니다.
URL
에서 사용하는 형식을 작성해야 유효성 검사에 통과할 수 있습니다.
패턴에서 유효성 검사는 실제 데이터를 확인하는 것이 아니기에 형식만 갖춰주면
검사에 통과할 수 있습니다.
예를 들어, 2131233@123232.com 같은 가짜 이메일도 문자 앞뒤에@
기호가 있기에
유효성 검사에 통과합니다.