1. Dom Forms trong JavaScript là gì?

Dom Forms chính là việc xác thực biểu mẫu HTML được thực hiện bằng Js. Thẻ HTML form có sự kiện onsubmit , đây chính là nơi mà bạn gọi đến hàm xử lý trước khi hành động submit xảy ra.

<form method="post" action="" onsubmit="return validate()">
 
</form>

Lưu ý

Hàm validate phải trả về kiểu boolean :

Trả về true thì cho phép submit form
Trả về false thì không submit form

Nội dung bên trong hàm validate không quan trọng, mà sự kiện này chỉ quan tâm đến giá trị return true / false của dòng return nằm bên trong sự kiện mà thôi.

Ví dụ: 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:

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:

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>
</head>
<body>

<h2>JavaScript Validation</h2>

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

</body>
</html>

2. Xác thực 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ả trường bắt buộc chưa
Nhập ngày, email, … hợp lệ chưa
Nhập văn bản vào trường số

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 dữ liệu đầu vào được gửi đến máy chủ web.

3. JavaScript có thể xác thực đầu vào là số

Dù là số thì Js cũng có thể validate . Js cũng thường được sử dụng để xác thực đầu vào số.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Vui lòng nhập một số từ 1 đến 10:</p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>
function myFunction() {
  // Nhận giá trị của trường đầu vào với id = "numb"
  let x = document.getElementById("numb").value;
  // Nếu x Không phải là Số hoặc nhỏ hơn một hoặc lớn hơn 10
  let text;
  if (isNaN(x) || x < 1 || x > 10) {
    text = "Số không hợp lệ";
  } else {
    text = "Số hợp lệ";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

4. 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.

Ví dụ: nếu trường biểu mẫu (fname) trống, required ngăn không cho gửi biểu mẫu này:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

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

<p>Nếu bạn bấm gửi mà không điền vào trường văn bản,
trình duyệt của bạn sẽ hiển thị thông báo lỗi.</p>

</body>
</html>

Chú ý

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.

5. 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:

Thuộc tính	Mô tả
disabled	Chỉ định rằng phần tử đầu vào sẽ bị vô hiệu hóa
max	Chỉ định giá trị lớn nhất của một phần tử đầu vào
min	Chỉ định giá trị nhỏ nhất của một phần tử đầu vào
pattern	Chỉ định mẫu giá trị của một phần tử đầu vào
required	Chỉ định trường đầu vào yêu cầu một phần tử
type	Chỉ định loại của một phần tử đầu vào