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

แอตทริบิวต์ pattern กำหนดการตรวจสอบฟิลด์ อินพุทของ ฟอร์ม HTML ด้วย นิพจน์ปกติ

นิพจน์ปกติคือคำสั่งพิเศษ ที่ช่วยให้สร้างกฎเกณฑ์การตรวจสอบได้ เกือบทุกประเภท คุณสามารถทำความรู้จักกับ มันโดยละเอียดได้ใน หนังสือ เกี่ยวกับนิพจน์ปกติของ PHP หรือใน หนังสือเกี่ยวกับ นิพจน์ปกติของ JavaScript

เมื่อพยายามส่งฟอร์ม ถ้า ฟิลด์ที่มีแอตทริบิวต์นี้ยังไม่ได้กรอกข้อมูล - เบราว์เซอร์จะไม่อนุญาตให้ส่งฟอร์มและจะแสดง ข้อผิดพลาดในรูปแบบของทูลทิปโผล่ขึ้นมา น่าเสียดายที่ ข้อความข้อผิดพลาดและลักษณะของมันไม่สามารถเปลี่ยนแปลงได้โดยใช้ HTML หรือ CSS

โปรดทราบว่าการมีแอตทริบิวต์ pattern ไม่ได้ช่วยให้คุณพ้นจากการตรวจสอบความถูกต้องของ การกรอกฟอร์มจากฝั่งเซิร์ฟเวอร์ด้วย PHP (เพราะการป้องกันผ่านแอตทริบิวต์สามารถเลี่ยงได้ง่าย)

ควรใช้แอตทริบิวต์ pattern กับแท็ก input หรือ textarea

ตัวอย่าง

เรามาดูที่แท็ก input และเพิ่มแอตทริบิวต์ pattern โดย ใส่นิพจน์ปกติที่ตรวจสอบ ว่าอินพุตนั้นถูกกรอกเป็น ตัวเลขสองหลัก (ตัวอย่างเช่น 25)

กรอกตัวเลขใดๆ และลองกดที่ ปุ่มเพื่อส่งฟอร์ม ถ้ากรอกตัวเลข ที่ไม่ใช่สองหลัก เบราว์เซอร์จะไม่อนุญาต ให้ส่งฟอร์มและจะแสดงข้อความข้อผิดพลาด ในกรณีอื่นฟอร์มจะถูกส่ง:

<form action="">
	<input type="text" pattern="\d{2}">
	<input type="submit">
</form>

ตัวอย่าง . ฟิลด์ว่าง

ในตัวอย่างที่แล้วเบราว์เซอร์แสดงข้อผิดพลาด เฉพาะในกรณีที่ฟิลด์ไม่ ว่าง (แม้ว่าฟิลด์ว่างจะไม่ใช่ ตัวเลขสองหลักก็ตาม) ลองมาทำให้ แสดงข้อผิดพลาดสำหรับฟิลด์ว่างด้วย - นอกเหนือจากแอตทริบิวต์ pattern ให้เขียนแอตทริบิวต์ required ด้วย:

<form action="">
	<input type="text" pattern="\d{2}" required>
	<input type="submit">
</form>

ดูเพิ่มเติม

แอตทริบิวต์ required,
ซึ่งใช้เพื่อทำการตรวจสอบว่าฟิลด์ว่างหรือไม่