HTML - Form 유효성 검사

MJ·2023년 2월 3일
0

HTML 

목록 보기
27/27
post-thumbnail

form 유효성 검사?

서버로 데이터를 제출하기 전에 올바른 양식으로 작성했는지, 필수 입력 항목에 빈칸은
없는지 확인하는 것을 말합니다.

예를 들면, 회원가입을 하는 사이트에서 ID는 입력했는데 비밀번호를 입력하지 않고 제출
한다면, 유효성 검사를 통해 제출 요청이 취소됩니다.

유효성 검사에는 javascript을 이용한 유효성 검사 방법과, HTML5의 유효성 검사방법이
존재합니다.



HTML-5 유효성 검사

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 & PASSWRD에 관한 유효성 검사

ID & PASSWORD는 필수로 입력해야 하며, ID는 최소:4/최대:20 범위에 문자를 작성해야
합니다.


이메일에 이미 매핑되어 있는 패턴에 대한 유효성 검사

타입이 이메일인 요소는, 기본적으로 앞/뒤의 문자 사이에 @ 기호를 사용해야 한다는
패턴이 매핑되어 있습니다.


URL에 매핑되어 있는 패턴에 대한 유효성 검사

이메일 타입과 마찬가지로, 타입이 URL인 요소 또한 기본적으로 패턴이 매핑되어 있습니다.
URL 에서 사용하는 형식을 작성해야 유효성 검사에 통과할 수 있습니다.

패턴에서 유효성 검사는 실제 데이터를 확인하는 것이 아니기에 형식만 갖춰주면
검사에 통과할 수 있습니다.


예를 들어, 2131233@123232.com 같은 가짜 이메일도 문자 앞뒤에 @ 기호가 있기에
유효성 검사에 통과합니다.

profile
프론트엔드 개발자가 되기 위한 학습 과정을 정리하는 블로그

0개의 댓글