07/09/2018, 14:58

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

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ệ
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0