Thuộc tính pattern của HTML <input>

HTML <input> thẻ

Định nghĩa và cách sử dụng

pattern Thuộc tính này quy định biểu thức chính quy, kiểm tra giá trị của phần tử <input> dựa trên biểu thức chính quy này khi nộp biểu mẫu.

Lưu ý:pattern Thuộc tính này áp dụng cho các loại đầu vào sau:

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

Lưu ý:sử dụng Thuộc tính title toàn cục miêu tả mẫu này để giúp người dùng hiểu rõ hơn.

Lưu ý:Vui lòng trong Hướng dẫn JavaScript Học thêm về biểu thức chính quy tại Trung tâm.

Ví dụ

Ví dụ 1

Dưới đây là biểu mẫu HTML chứa một trường nhập, trường này chỉ có thể chứa ba chữ cái (không thể chứa số hoặc ký tự đặc biệt):

<form action="/action_page.php">
  <label for="country_code">Mã quốc gia:</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="Mã quốc gia ba chữ cái"><br><br>
  <input type="submit">
</form>

Thử ngay

Ví dụ 2

Dưới đây là một phần tử <input> với thuộc tính type là "password", bắt buộc phải chứa ít nhất tám ký tự:

<form action="/action_page.php">
  <label for="pwd">Mật khẩu:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Bắt buộc phải chứa tám hoặc nhiều hơn ký tự">
  <input type="submit">
</form>

Thử ngay

Ví dụ 3

Dưới đây là một phần tử <input> với thuộc tính type là "password", bắt buộc phải chứa 8 ký tự hoặc nhiều hơn, ít nhất chứa một số, một chữ cái in hoa và một chữ cái in thường:

<form action="/action_page.php">
  <label for="pwd">Mật khẩu:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Phải chứa ít nhất tám ký tự, trong đó phải chứa một số, một chữ cái in hoa và một chữ cái in thường">
  <input type="submit">
</form>

Thử ngay

Ví dụ 4

Dưới đây là một phần tử <input> với thuộc tính type là "email", bắt buộc phải theo thứ tự sau: characters@characters.domain.

Bắt đầu bằng các ký tự và dấu @, sau đó theo sau nhiều ký tự hơn, sau đó là dấu chấm ".". Sau dấu chấm ".", ít nhất thêm hai chữ cái từ a đến z:

<form action="/action_page.php">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

Thử ngay

Ví dụ 5

Dưới đây là một phần tử <input> với thuộc tính type là "search", không thể chứa các ký tự sau: ' hoặc " .

<form action="/action_page.php">
  <label for="search">Tìm kiếm:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Nhập liệu không hợp lệ">
  <input type="submit">
</form>

Thử ngay

Ví dụ 6

Dưới đây là một phần tử <input> với thuộc tính type là "url", bắt buộc phải bắt đầu bằng http:// hoặc https://, sau đó theo sau ít nhất một ký tự:

<form action="/action_page.php">
  <label for="website">Trang chủ:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Chứa http://">
  <input type="submit">
</form>

Thử ngay

Cú pháp

<input pattern="regexp">

Giá trị thuộc tính

Giá trị Mô tả
regexp Định nghĩa biểu thức chính quy để kiểm tra giá trị của phần tử <input>.

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
5.0 10.0 4.0 10.1 9.6

Ghi chú：pattern Thuộc tính là thuộc tính mới trong HTML5.

HTML <input> thẻ