คุณสมบัติ HTML DOM Input Password pattern

คุณสมบัติ pattern ของ input type="password" ใช้สำหรับตั้งค่าหรือดึงค่าแอตทริบิวต์ pattern ซึ่งระบุ นิพจน์ปกติ (regular expression) เพื่อตรวจสอบความถูกต้องของรหัสผ่านที่ผู้ใช้กรอก

ไวยากรณ์ (Syntax)

การตั้งค่า pattern:

passwordObject.pattern = regexp

regexp คือนิพจน์ปกติที่ใช้ตรวจสอบรหัสผ่าน

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
<h1>คุณสมบัติ pattern ของ Input Password</h1>
<p>รหัสผ่านต้องเป็น: ตัวเลข 3 หลัก หรือ ตัวอักษร a-g จำนวน 6 ตัว</p>
<form action="/Sample_page.php">
  รหัสผ่าน: <input type="password" id="PASS" name="passW" pattern="[0-9]{3}|[a-g]{6}" title="สามตัวเลข หรือ หกตัวอักษร a-g">
  <input type="submit">
</form>
<br>
<button onclick="passPattern()">ดู PATTERN</button>
<p id="Sample"></p>
<script>
  function passPattern() {
    var P = document.getElementById("PASS").pattern;
    document.getElementById("Sample").innerHTML = "ค่า pattern attribute คือ: " + P;
  }
</script>
</body>
</html>

ผลลัพธ์

ฟอร์มแสดงช่องรหัสผ่านพร้อม validation ตาม pattern

หากกรอกรหัสผ่านไม่ตรง pattern: จะแสดงข้อความจากแอตทริบิวต์ title

คลิกปุ่ม "ดู PATTERN": แสดงค่า regex string ที่ตั้งไว้

คำอธิบายโค้ด

• pattern="[0-9]{3}|[a-g]{6}" — ยอมรับตัวเลข 3 หลัก หรือ ตัวอักษร a-g จำนวน 6 ตัว
• title — ข้อความแจ้งเตือนเมื่อกรอกไม่ผ่าน validation
• ฟังก์ชัน passPattern() ดึงค่า pattern property (คืนค่าเป็น string) แล้วแสดงผล

หมายเหตุ: Pattern validation ทำงานฝั่ง client-side ควรมีการตรวจสอบฝั่งเซิร์ฟเวอร์ด้วยเพื่อความปลอดภัย