여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. input - 양식 확인
input – 양식 확인
5개월전 작성
5개월전 수정

Input 태그 이용하여 사용자가 입력할 수 있도록 할 때 Pattern validation 하는 방법에 대해 알아보자.

input 양식 확인

속성
required
:
필드에 데이터 입력이 필수인지 여부를 지정한다.
minlength
:
필드에 문자를 입력할 때 최소 길이를 지정한다.
maxlength
:
필드에 문자를 입력할 때 최대 길이를 지정한다.
min
:
필드에 숫자를 입력할 때 최소값을 지정한다.
max
:
필드에 숫자를 입력할 때 최대값을 지정한다.
type
:
데이터가 숫자, 메일 주소, 메일 주소등 사전 설정 유형이어야 하는지 여부를 지정한다.
pattern
:
필드에 입력한 데이터를 어떤 양식으로 기재해야하는지 정규식을 지정한다.

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}$">

기본 예시




참고
Mingg`s Diary
밍구
공부 목적 블로그