ความหมายและการใช้งาน
pattern แอตทริบิวต์ระบุนิพจน์ปกติว่า <input> ค่าองค์ประกอบของการตรวจสอบกับ
หมายเหตุ: pattern แอตทริบิวต์ทำงานร่วมกับรูปแบบการใส่ต่อไปนี้: text, date, search, url, tel, email และ password
เคล็ดลับ: ใช้ทั่วโลก title แอตทริบิวต์เพื่ออธิบายรูปแบบที่จะช่วยให้ผู้ใช้
เคล็ดลับ: การเรียนรู้เพิ่มเติมเกี่ยวกับ การแสดงผลปกติ ในการกวดวิชา JavaScript ของเรา
นำไปใช้กับ
pattern แอตทริบิวต์ที่สามารถใช้กับองค์ประกอบดังต่อไปนี้:
| ธาตุ | คุณลักษณะ |
|---|---|
| <input> | pattern |
ตัวอย่าง
Input ตัวอย่าง
รูปแบบ HTML ที่มีช่องใส่ที่สามารถมีเพียงสามตัวอักษร (ไม่มีตัวเลขหรืออักขระพิเศษ):
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code">
<input type="submit">
</form>
ลองตัวเอง» Password ตัวอย่าง
<input> องค์ประกอบที่มี type="password" ที่จะต้องมีอย่างน้อย 6 ตัวอักษร:
<form action="demo_form.asp">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or
more characters">
<input type="submit">
</form>
ลองตัวเอง» Password ตัวอย่าง
<input> องค์ประกอบที่มี type="password" ที่จะต้องมี 8 หรือมากกว่าตัวอักษรที่มีจำนวนอย่างน้อยหนึ่งและเป็นหนึ่งในตัวพิมพ์ใหญ่และพิมพ์เล็กตัวอักษร:
<form action="demo_form.asp">
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>
ลองตัวเอง» Browser สนับสนุน
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่แอตทริบิวต์
| คุณลักษณะ | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | ได้รับการสนับสนุน | 9.6 |