HTML DOM 입력 비밀번호 패턴 속성은 입력 비밀번호 필드의 패턴 속성을 설정하거나 반환하는 데 사용됩니다. 패턴 속성에 지정된 정규식과 비교하여 비밀번호를 확인합니다.
구문
다음은
의 구문입니다.패턴 속성 설정하기 -
passwordObject.pattern = regexp
여기서 regexp는 비밀번호 필드를 검사하는 정규식입니다.
예시
암호 패턴 속성에 대한 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<body>
<h1>Input Password pattern property</h1>
<p>The password can either be of three numeric characters or 6 alphabet characters from a to g</p>
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form>
<br>
<button onclick="passPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
function passPattern() {
var P = document.getElementById("PASS").pattern;
document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}
</script>
</body>
</html>입니다. 출력
이것은 다음과 같은 출력을 생성합니다 -
패턴 속성에 지정된 정규식과 일치하지 않는 비밀번호 입력 시 -
GET PATTERN 버튼을 클릭하면 -
위의 예에서
암호 id=”Pass”, name=”PassW” 및 pattern="[0-9]{3}|[a-g]{6}" 유형의 입력 요소를 만들었습니다. 여기에서 패턴 속성 값은 a에서 g까지의 범위에서 3개의 숫자 값 또는 6개의 알파벳을 입력할 수 있음을 지정하는 정규식입니다. 입력이 이 정규식과 일치하지 않으면 제목 속성 값이 입력 상자 위에 표시됩니다. 이 비밀번호 필드는 action 속성 값이 "/Sample_page.php"로 설정된 양식 내부에 있습니다. 여기에서 제출 버튼을 클릭하면 양식 데이터가 제출됩니다 -
<form action="/Sample_page.php">
Password: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form> 사이의 3자리 숫자 또는 6자리 알파벳 그런 다음 사용자가 클릭할 때 passPattern() 메서드를 실행하는 GET PATTERN 버튼을 만들었습니다.
<button onclick="passPattern()">GET PATTERN</button>
passPattern()은 getElementById() 메서드를 사용하여 암호 유형의 입력 필드를 가져오고 문자열 유형의 정규식을 반환하는 패턴 속성을 가져옵니다. 정규식 문자열은 변수 P에 할당되고 ID가 "Sample"인 단락에 표시됩니다. innerHTML 속성을 사용합니다.
function passPattern() {
var P = document.getElementById("PASS").pattern;
document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
}