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 |