input 태그의 pattern 속성과 정규표현식

<input pattern="">

• HTML5에서 새롭게 추가된 속성입니다.
• <input> 태그의 pattern 속성은 폼 제출 시 <input> 요소의 값을 검사할 때 사용될 정규 표현식(regular expression)을 명시합니다.
• 이때 전역 속성인 title 속성을 사용하여 정규 표현식에 간단한 설명을 추가함으로써 사용자가 정확한 값을 입력할 수 있도록 도움을 줄 수 있습니다.
• 보안상 예상치 않은 데이터 입력을 완전하게 컨트롤 하기 위해서는 최종적으로 서버사이드 스크립트에서 처리해 주어야 한다.

 

pattern 속성이 제대로 동작하는 <input>요소의 type 속성값은 다음과 같습니다.

date, email, password, search, tel, text, url

 

문법

<input pattern="정규표현식">

 

예제

<form action="/examples/media/action_target.php" method="get">
    생년월일: <input type="text" name="bday" pattern="[0-9]{6}" title="'yymmdd'와 같은 6자리 숫자">
    <input type="submit">
</form>

 

---

 

 

예제

<!-- 1. 숫자만 -->
<input type="text" name="patternValue" pattern="\d*">
<input type="text" name="patternValue" pattern="^[0-9]+$">


<!-- 2. 영문 대소문자만 -->
<input type="text" name="patternValue" pattern="^[a-zA-Z]+$">


<!-- 3. 영문 대소문자만 (띄어쓰기 및 공백 가능) -->
<input type="text" name="patternValue" pattern="^[a-zA-Z\s]+$">


<!-- 3-1. 영문 소문자, 숫자, 언더바(_) 6~50자 -->
<input type="text" name="id" pattern="^([a-z0-9_]){6,50}$">


<!-- 4. 숫자, 영문, 대소문자만 -->
<input type="text" name="patternValue" pattern="^[a-zA-Z0-9]+$">


<!-- 5. 최소 8자리에서 최대 16자리까지 숫자, 영문, 특수문자 각 1개 이상 포함 (암호 유효성 검사에 유용하다.) -->
<input type="text" name="patternValue" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,16}$">


<!-- 5-1. 영문 대소문자, 숫자, 특수문자를 꼭 포함하여 6~50자 -->
<input type="password" name="passwd" pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*()_-+=[]{}~?:;`|/]).{6,50}$">


<!-- 5-2. 특수문자만 입력 방지(한글이나 한자 등 일반적인 문자는 모두 입력 가능 -->
<input type="text" id="nickname" pattern="[^!@#$%^&*()_-+=[]{}~?:;`|/<>'"]+">

<!-- 6. 세 개의 문자(아무 숫자나 특수문자)를 포함 -->
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">


<!-- 7. <input> 와 요소 type="password" 적어도 하나의 숫자입니다 8 자 이상, 하나의 대문자와 소문자를 포함해야합니다 -->
<input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">


<!-- 8. <input> 와 요소 type="email" 다음과 같은 순서로해야합니다 : 문자 @ 문자. @ 기호 뒤에 도메인 (문자는 다음 이상의 문자 다음에, 그리고 "." 애프터 "." 당신은 A에서 Z까지 2 ~ 3 글자를 쓸 수 있습니다 서명 : -->
<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">


<!-- 9. <input> 와 요소 type="search" 다음 문자를 포함 할 수 없습니다 ' 또는 " -->
<input type="search" name="search" pattern="[^'\x22]+" title="Invalid input">


<!-- 10. <input> 와 요소 type="url" 로 시작해야합니다 http:// 또는 https:// 적어도 하나의 문자 뒤에 : -->
<input type="url" name="website" pattern="https?://.+" title="Include http://">

 

 

 

 

 

 

 

 

 

 

---

참고:)

 

https://neomania.tistory.com/3

 

html input pattern 정규표현식 모음

 

 

http://www.w3bai.com/ko/tags/att_input_pattern.html

HTML <input> pattern Attribute

 

 

https://lynmp.com/en/article/nr5181b3333a2824ae

HTML5 아이디(Id) 및 암호(Passowrd) Input 패턴 - LYNMP

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions#%EC%A0%95%EA%B7%9C_%ED%91%9C%ED%98%84%EC%8B%9D_%ED%8C%A8%ED%84%B4_%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0