Biểu mẫu JavaScript
Xác thực biểu mẫu JavaScript
Việc xác thực biểu mẫu HTML có thể được thực hiện bằng JavaScript.
Nếu trường biểu mẫu (fname) trống, hàm này sẽ cảnh báo một thông báo và trả về false để ngăn biểu mẫu được gửi:
Ví dụ về JavaScript
function validateForm() {
let
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}Hàm có thể được gọi khi biểu mẫu được gửi:
Ví dụ về biểu mẫu HTML
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScript có thể xác thực đầu vào số
JavaScript thường được sử dụng để xác thực đầu vào số:
Vui lòng nhập một số từ 1 đến 10
Xác thực biểu mẫu HTML tự động
Trình duyệt có thể tự động thực hiện xác thực biểu mẫu HTML:
Nếu trường biểu mẫu (fname) trống, requiredthuộc tính ngăn không cho gửi biểu mẫu này:
Ví dụ về biểu mẫu HTML
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
Xác thực biểu mẫu HTML tự động không hoạt động trong Internet Explorer 9 hoặc phiên bản cũ hơn.
Xác nhận dữ liệu
Xác thực dữ liệu là quá trình đảm bảo rằng thông tin đầu vào của người dùng là sạch sẽ, chính xác và hữu ích.
Các nhiệm vụ xác thực điển hình là:
- người dùng đã điền vào tất cả các trường bắt buộc chưa?
- người dùng đã nhập ngày hợp lệ chưa?
- người dùng đã nhập văn bản vào trường số chưa?
Thông thường, mục đích của việc xác thực dữ liệu là để đảm bảo người dùng nhập chính xác.
Xác thực có thể được xác định bằng nhiều phương pháp khác nhau và được triển khai theo nhiều cách khác nhau.
Xác thực phía máy chủ được thực hiện bởi máy chủ web, sau khi đầu vào đã được gửi đến máy chủ.
Xác thực phía máy khách được thực hiện bởi trình duyệt web, trước khi đầu vào được gửi đến máy chủ web.
Xác thực Ràng buộc HTML
HTML5 đã giới thiệu một khái niệm xác thực HTML mới được gọi là xác thực ràng buộc .
Xác thực ràng buộc HTML dựa trên:
- Ràng buộc xác thực Các thuộc tính đầu vào HTML
- Ràng buộc xác thực CSS Pseudo Selectors
- Ràng buộc xác thực DOM Thuộc tính và Phương thức
Ràng buộc xác thực Thuộc tính đầu vào HTML
| Attribute | Description |
|---|---|
| disabled | Specifies that the input element should be disabled |
| max | Specifies the maximum value of an input element |
| min | Specifies the minimum value of an input element |
| pattern | Specifies the value pattern of an input element |
| required | Specifies that the input field requires an element |
| type | Specifies the type of an input element |
Để có danh sách đầy đủ, hãy chuyển đến Thuộc tính đầu vào HTML .
Ràng buộc xác thực CSS Pseudo Selectors
| Selector | Description |
|---|---|
| :disabled | Selects input elements with the "disabled" attribute specified |
| :invalid | Selects input elements with invalid values |
| :optional | Selects input elements with no "required" attribute specified |
| :required | Selects input elements with the "required" attribute specified |
| :valid | Selects input elements with valid values |
Để có danh sách đầy đủ, hãy chuyển đến CSS Pseudo Classes .