วิธาใช้แอตทริบิวต์ Pattern ใน HTML

บทนำ

แอตทริบิวต์ pattern กำหนด Regular Expression (Regex) สำหรับ Validate ค่าที่กรอก ใช้ได้กับ: text, search, url, tel, email, password, date

ตัวอย่างโค้ด (รหัสผ่านอย่างน้อย 8 ตัวอักษร)

<!DOCTYPE html>
<html>
  <body>
    <h2>สมัครสมาชิก</h2>
    <form action="/new.php">
      ชื่อผู้ใช้<br>
      <input type="text" name="name" /><br>
      รหัสผ่าน<br>
      <input type="password" name="password" pattern=".{8,}" title="ต้องมี 8 ตัวอักษรขึ้นไป"><br><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Pattern พื้นฐานที่นิยมใช้

Pattern	ความหมาย
`[A-Za-z]{3,}`	ตัวอักษรอังกฤษอย่างน้อย 3 ตัว
`[0-9]{10}`	ตัวเลข 10 หลักพอดี
`[A-Za-z0-9]{6,12}`	อักษร/ตัวเลข 6-12 ตัว
`[A-Z]{1,}[a-z]+`	ตัวแรกใหญ่ ต่อมาคือเล็ก
`\d{3}-\d{3}-\d{4}`	โทรศัพท์ US: 123-456-7890
`0[0-9]{8,9}`	เบอร์ไทย: 08x-xxx-xxxx
`[^@]+@[^@]+\.[^@]+`	อีเมลพื้นฐาน

แอตทริบิวต์ title

ใช้ title ร่วมกับ pattern เพื่อแสดงข้อความ Error ที่เข้าใจง่าย

หมายเหตุ

Pattern ต้อง Match ทั้งสตริง (Implicit ^...$)
JavaScript: element.checkValidity(), element.validity.patternMismatch