Biểu mẫu trong JavaScript

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

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