Thuộc tính pattern

Thuộc tính pattern thiết lập việc kiểm tra trường nhập liệu HTML biểu mẫu bằng biểu thức chính quy.

Biểu thức chính quy là những lệnh đặc biệt, cho phép tạo ra hầu như bất kỳ quy tắc kiểm tra nào. Bạn có thể tìm hiểu chi tiết hơn về chúng trong sách về biểu thức chính quy PHP hoặc trong sách về biểu thức chính quy JavaScript.

Khi cố gắng gửi biểu mẫu trong trường hợp trường có thuộc tính này không được điền - trình duyệt sẽ không cho phép gửi biểu mẫu và hiển thị lỗi dưới dạng chú giải công cụ bật lên. Thật không may, văn bản thông báo lỗi và giao diện của nó không thể thay đổi bằng HTML hoặc CSS.

Hãy lưu ý rằng việc có thuộc tính pattern không giải phóng bạn khỏi việc kiểm tra tính đúng đắn của biểu mẫu đã điền từ phía máy chủ bằng PHP (vì bảo vệ qua thuộc tính này dễ dàng bị bỏ qua).

Thuộc tính pattern nên được áp dụng cho các thẻ input hoặc textarea.

Ví dụ

Hãy xem xét thẻ input và thêm thuộc tính pattern, trong đó chúng ta đặt một biểu thức chính quy để kiểm tra rằng trong ô input đã nhập một số có hai chữ số (ví dụ: 25).

Nhập bất kỳ số nào và thử nhấn vào nút để gửi biểu mẫu. Nếu nhập một số không phải hai chữ số, thì trình duyệt sẽ không cho phép gửi biểu mẫu và hiển thị thông báo lỗi, ngược lại biểu mẫu sẽ được gửi đi:

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

Ví dụ . Trường để trống

Trong ví dụ trước, trình duyệt chỉ hiển thị lỗi trong trường hợp trường không trống (mặc dù trường trống không phải là số có hai chữ số). Hãy thử làm sao để lỗi cũng được hiển thị cho trường trống - cùng với thuộc tính pattern hãy viết thêm thuộc tính required:

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

Xem thêm

thuộc tính required,
dùng để kiểm tra trường trống