Biểu mẫu trong JavaScript - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Biểu mẫu trong JavaScript

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Xác nhận biểu mẫu trong JavaScript

Xác nhận mẫu HTML có thể được thực hiện bằng JavaScript. Nếu một trường mẫu (fname) trống rỗng, chức năng này sẽ cảnh báo một thông báo và trả về false để ngăn không cho biểu mẫu được gửi:

Ví dụ JavaScript

function validateForm() {
var x = document.forms[“myForm”][“fname”].value;
if (x == “”) {
alert(“Name must be filled out”);
return false;
}
}

Hàm này có thể được gọi khi gửi biểu mẫu.

Ví dụ HTML Form:

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

JavaScript có thể xác nhận số nhập vào

JavaScript thường được sử dụng để xác nhận số nhập vào:

<script>
function myFunction() {
var x, text;

// Get the value of the input field with id=”numb”
x = document.getElementById(“numb”).value;

// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = “Input not valid”;
} else {
text = “Input OK”;
}
document.getElementById(“demo”).innerHTML = text;
}
</script>

Xác nhận mẫu HTML tự động

Xác nhận mẫu HTML có thể được thực hiện tự động bởi trình duyệt. Nếu một trường mẫu (fname) rỗng, thuộc tính required ngăn không cho biểu mẫu này được gửi:

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

Tự động xác nhận mẫu HTML không hoạt động trong Internet Explorer 9 hoặc cũ hơn.

Xác nhận dữ liệu

Xác nhận 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à hữu ích. Các nhiệm vụ xác nhận điển hình là:

  • Có người sử dụng điền vào tất cả các trường bắt buộc?
  • Có người sử dụng nhập một ngày hợp lệ?
  • Có người sử dụng nhập văn bản trong một trường số?

Thông thường, mục đích của xác nhận dữ liệu là đảm bảo người dùng nhập vào chính xác. Xác nhận có thể được xác định bằng nhiều phương pháp khác nhau, và 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ột máy chủ web, sau khi dữ liệu vào được gửi đến máy chủ. Xác nhận phía máy khách được thực hiện bởi một trình duyệt web, trước khi dữ liệu vào máy chủ web.

Xác nhận hạn chế HTML

HTML5 đã giới thiệu một khái niệm xác nhận HTML mới được gọi là xác nhận ràng buộc. Xác thực ràng buộc HTML dựa trên:

  • Xác nhận hạn chế Các thuộc tính đầu vào HTML
  • Xác nhận hạn chế CSS Pseudo Selectors
  • Kiểm tra tính hợp lệ thuộc tính và phương thức DOM

Xác nhận hạn chế các thuộc tính nhập trong HTML

Thuộc tính Mô tả
disabled Chỉ định rằng các yếu tố đầu vào nên được 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ị tối thiểu 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 bắt buộc một phần tử
type Chỉ định kiểu của một phần tử đầu vào

Xác nhận hạn chế CSS trình chọn Pseudo

Selector Mô tả
:disabled Chọn các phần tử đầu vào với thuộc tính “disabled” được chỉ định
:invalid Chọn các phần tử đầu vào với các giá trị không hợp lệ
:optional Chọn các phần tử đầu vào không có thuộc tính “required” được chỉ định
:required Chọn các phần tử đầu vào với thuộc tính “required” được chỉ định
:valid Chọn các phần tử đầu vào với các giá trị hợp lệ