JavaScript biểu mẫu

Kiểm tra biểu mẫu JavaScript

Kiểm tra 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ẽ hiển thị một thông báo và trả về false để ngăn chặn biểu mẫu được gửi:

JavaScript 实例

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Tên phải được điền đầy đủ");
    return false;
  }
}

Bạn có thể gọi hàm này khi gửi biểu mẫu:

Mẫu biểu mẫu HTML

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Tên: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Thử trực tiếp

JavaScript có thể kiểm tra đầu vào số

JavaScript thường được sử dụng để kiểm tra đầu vào số:

Vui lòng nhập số từ 1 đến 10:

Thử trực tiếp

Kiểm tra tự động biểu mẫu HTML

Kiểm tra biểu mẫu HTML có thể được trình duyệt tự động thực hiện:

Nếu trường biểu mẫu (fname) trống, thì required Các thuộc tính sẽ ngăn chặn việc gửi biểu mẫu này:

Mẫu biểu mẫu HTML

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Thử trực tiếp

Lưu ý:Kiểm tra tự động HTML biểu mẫu không hoạt động trong Internet Explorer 9 hoặc các phiên bản trước.

Kiểm tra dữ liệu

Kiểm tra dữ liệu là quá trình đảm bảo rằng dữ liệu nhập vào của người dùng là sạch, chính xác và có ích.

Các nhiệm vụ kiểm tra tiêu chuẩn bao gồm:

  • Người dùng có điền đầy đủ tất cả các trường bắt buộc không?
  • Người dùng có nhập ngày hợp lệ không?
  • Người dùng có nhập văn bản vào trường số không?

Trong hầu hết các trường hợp, mục đích của việc kiểm tra dữ liệu là đảm bảo rằng dữ liệu nhập vào của người dùng là chính xác.

Kiểm tra có thể được định nghĩa bằng nhiều phương pháp khác nhau và triển khai theo nhiều cách khác nhau.

Kiểm tra trên máy chủ được thực hiện bởi máy chủ web sau khi dữ liệu được gửi đến máy chủ.

Trước khi gửi dữ liệu vào máy chủ web, trình duyệt web thực hiện việc kiểm tra của khách hàng.

Kiểm tra ràng buộc HTML

HTML5 giới thiệu một khái niệm mới về kiểm tra HTML, được gọi là kiểm tra ràng buộc.

Kiểm tra xác nhận HTML dựa trên:

  • Thuộc tính kiểm tra xác nhận ràng buộc HTML input
  • Chọn pseudo-class kiểm tra xác nhận ràng buộc
  • Thuộc tính và phương pháp kiểm tra xác nhận ràng buộc DOM

Thuộc tính kiểm tra xác nhận ràng buộc HTML input

Thuộc tính Mô tả
disabled Định nghĩa nên tắt yếu tố input.
max Định nghĩa giá trị lớn nhất của yếu tố input.
min Định nghĩa giá trị nhỏ nhất của yếu tố input.
pattern Định nghĩa mẫu giá trị của yếu tố input.
required Định nghĩa trường input bắt buộc.
type Định nghĩa loại của yếu tố input.

Để xem danh sách đầy đủ, vui lòng truy cập HTML Input 属性。

Chọn pseudo-class kiểm tra xác nhận ràng buộc

Chọn器 Mô tả
:disabled Chọn các yếu tố input đã quy định thuộc tính "disabled".
:invalid Chọn các yếu tố input có giá trị không hợp lệ.
:optional Chọn các yếu tố input chưa quy định thuộc tính "required".
:required Chọn các yếu tố input đã quy định thuộc tính "required".
:valid Chọn các yếu tố input có giá trị hợp lệ.

Để xem danh sách đầy đủ, vui lòng truy cập CSS 伪类。