แอตทริบิวต์รูปแบบ HTML
ความหมายและการใช้งาน
แอตทริบิวต์patternระบุนิพจน์ทั่วไปที่
<input>มีการตรวจสอบค่าขององค์ประกอบ
หมายเหตุ:แอตทริบิวต์patternใช้งานได้กับประเภทการป้อนข้อมูลต่อไปนี้: ข้อความ วันที่ ค้นหา url โทรศัพท์ อีเมล และรหัสผ่าน
เคล็ดลับ:title ใช้ แอตทริบิวต์global เพื่ออธิบายรูปแบบเพื่อช่วยเหลือผู้ใช้
เคล็ดลับ:เรียนรู้เพิ่มเติมเกี่ยวกับนิพจน์ทั่วไปในบทช่วยสอน JavaScript ของเรา
นำไปใช้กับ
สามารถใช้ แอตทริบิวต์patternกับองค์ประกอบต่อไปนี้:
| องค์ประกอบ | คุณลักษณะ |
|---|---|
| <input> | ลวดลาย |
ตัวอย่าง
ตัวอย่างอินพุต
แบบฟอร์ม HTML ที่มีช่องใส่ข้อมูลที่ประกอบด้วยตัวอักษรได้เพียงสามตัว (ไม่มีตัวเลขหรืออักขระพิเศษ):
<form action="/action_page.php">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
ตัวอย่างรหัสผ่าน
<input> องค์ประกอบที่มีประเภท="รหัสผ่าน" ที่ต้องมี 6 อักขระขึ้นไป:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
ตัวอย่างรหัสผ่าน
องค์ประกอบ <input> ที่มีประเภท="รหัสผ่าน" ที่ต้องมีอักขระ 8 ตัวขึ้นไปที่มีตัวเลขอย่างน้อยหนึ่งตัว และตัวพิมพ์ใหญ่และตัวพิมพ์เล็กหนึ่งตัว:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนแอตทริบิวต์อย่างเต็มที่
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | Not supported | 9.6 |