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