คุณสมบัติรูปแบบ HTML DOM Input Password pattern ใช้สำหรับการตั้งค่าหรือส่งคืนแอตทริบิวต์รูปแบบของช่องรหัสผ่านอินพุต โดยจะตรวจสอบรหัสผ่านกับนิพจน์ทั่วไปที่ระบุโดยคุณสมบัติรูปแบบ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ
การตั้งค่าคุณสมบัติรูปแบบ -
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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ในการป้อนรหัสผ่านที่ไม่ตรงกับ regex ที่ระบุในคุณสมบัติรูปแบบ -
เมื่อคลิกปุ่ม GET PATTERN -
ในตัวอย่างข้างต้น
เราได้สร้างองค์ประกอบอินพุตที่มีประเภทรหัสผ่าน id=”Pass”, name=”PassW” และ pattern="[0-9]{3}|[a-g]{6}" ที่นี่ ค่าแอตทริบิวต์รูปแบบคือ regex ที่ระบุว่าคุณสามารถป้อนค่าตัวเลขสามค่าหรือ 6 ตัวอักษรตั้งแต่ a ถึง g หากอินพุตไม่ตรงกับ regex นี้ ค่าแอตทริบิวต์ของชื่อจะปรากฏเหนือช่องป้อนข้อมูล ฟิลด์รหัสผ่านนี้อยู่ในฟอร์มที่มีค่าแอ็ตทริบิวต์แอ็ตทริบิวต์เป็น “/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> เราได้สร้างปุ่ม GET PATTERN ที่จะรันเมธอด passPattern() เมื่อผู้ใช้คลิก -
<button onclick="passPattern()">GET PATTERN</button>
passPattern() ใช้เมธอด getElementById() เพื่อรับฟิลด์อินพุตที่มีรหัสผ่านประเภทและรับคุณสมบัติรูปแบบซึ่งส่งคืน regex ของสตริงประเภท .. สตริง regex ถูกกำหนดให้กับตัวแปร P และแสดงในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML
function passPattern() {
var P = document.getElementById("PASS").pattern;
document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
} 