HTML 패턴 속성
정의 및 사용
속성 은 요소의 값이 검사 pattern되는 정규식을 지정합니다 .
<input>
참고: 속성 은 pattern텍스트, 날짜, 검색, URL, 전화, 이메일 및 비밀번호 입력 유형과 함께 작동합니다.
팁: 전역 title속성을 사용하여 사용자에게 도움이 되는 패턴을 설명합니다.
팁: JavaScript 자습서에서 정규식 에 대해 자세히 알아보세요 .
에 적용
속성 은 pattern다음 요소에서 사용할 수 있습니다.
| 요소 | 기인하다 |
|---|---|
| <입력> | 무늬 |
예
입력 예
세 글자(숫자 또는 특수 문자 없음)만 포함할 수 있는 입력 필드가 있는 HTML 양식:
<form action="/action_page.php">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
비밀번호 예
6개 이상의 문자를 포함해야 하는 type="password"인 <input> 요소:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
비밀번호 예
하나 이상의 숫자와 하나의 대문자 및 소문자로 구성된 8자 이상의 문자를 포함해야 하는 type="password"인 <input> 요소:
<form action="/action_page.php">
Password: <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">
<input type="submit">
</form>
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | Not supported | 9.6 |