Biểu mẫu JavaScript
Xác thực biểu mẫu JavaScript
Xác thực 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ề sai để ngăn việc gửi biểu mẫu:
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>
Hãy tự mình thử »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 số từ 1 đến 10
Hãy tự mình thử »Xác thực biểu mẫu HTML tự động
Trình duyệt có thể thực hiện xác thực biểu mẫu HTML một cách tự động:
Nếu trường biểu mẫu (fname) trống, thuộc tính required
sẽ ngăn việc 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>
Hãy tự mình thử »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 dữ liệu đầu vào của người dùng sạch sẽ, chính xác và hữu ích.
Nhiệm vụ xác nhận đ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 dữ liệu đầu vào của người dùng chính xác.
Việ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 dữ liệu đầ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 dữ liệu đầ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:
- Thuộc tính đầu vào HTML xác thực ràng buộc
- Bộ chọn giả CSS xác thực ràng buộc
- Thuộc tính và phương thức DOM xác thực ràng buộc
Thuộc tính đầu vào HTML xác thực ràng buộc
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 truy cập Thuộc tính đầu vào HTML .
Bộ chọn giả CSS xác thực ràng buộc
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 truy cập Lớp giả CSS .