JavaScript - Forms API: Hướng dẫn cho người mới bắt đầu

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình đầy thú vị vào thế giới của các biểu mẫu web và API Forms mạnh mẽ của JavaScript. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - tôi sẽ là hướng dẫn viên thân thiện của bạn, và chúng ta sẽ cùng nhau giải quyết chủ đề này từng bước một. Vậy, hãy lấy饮料 yêu thích của bạn, thư giãn và cùng tôi lặn sâu vào!

Giới thiệu về biểu mẫu web

Trước khi chúng ta nhảy vào API Forms, hãy nói về các biểu mẫu web. Bạn có lẽ đã gặp chúng nhiều lần khi duyệt web. Nhớ lại lần cuối bạn đăng ký tài khoản mới hoặc điền vào một cuộc khảo sát trực tuyến? Đúng vậy - bạn đã tương tác với một biểu mẫu web!

Biểu mẫu web giống như hồ sơ kỹ thuật số. Chúng cho phép người dùng nhập liệu, sau đó có thể gửi đến máy chủ để xử lý. Nhưng đây là phần thú vị: với JavaScript, chúng ta có thể làm cho các biểu mẫu này thông minh và tương tác hơn.

API Forms

API Forms là một bộ công cụ được cung cấp bởi JavaScript cho phép chúng ta làm việc với các biểu mẫu theo những cách mạnh mẽ. Nó giống như nâng cấp não cho các biểu mẫu của bạn!

Truy cập các phần tử biểu mẫu

Hãy bắt đầu với những điều cơ bản. Làm thế nào chúng ta thực sự lấy được một biểu mẫu bằng JavaScript? Nó dễ dàng hơn bạn nghĩ!

// Giả sử chúng ta có một biểu mẫu với id "myForm"
let myForm = document.getElementById("myForm");

// Hoặc nếu chúng ta muốn lấy tất cả các biểu mẫu trên trang
let allForms = document.forms;

Trong ví dụ này, document.getElementById("myForm") giống như yêu cầu JavaScript tìm một biểu mẫu có ID "myForm" trên trang web của chúng ta. Nó giống như gọi tên một học sinh trong lớp - JavaScript sẽ định vị biểu mẫu cụ thể đó cho chúng ta.

Dòng thứ hai, document.forms, cho chúng ta tất cả các biểu mẫu trên trang. Nó giống như lấy danh sách tất cả học sinh trong trường!

Xử lý việc gửi biểu mẫu

Bây giờ chúng ta có thể truy cập biểu mẫu của mình, hãy xem chúng ta có thể xử lý điều gì khi ai đó gửi nó:

myForm.addEventListener("submit", function(event) {
event.preventDefault(); // Ngăn chặn việc gửi biểu mẫu bình thường
console.log("Biểu mẫu đã được gửi!");
// Tại đây bạn có thể thêm mã để xử lý dữ liệu biểu mẫu
});

Mã này giống như thiết lập một báo động đặc biệt sẽ hoạt động khi ai đó cố gắng gửi biểu mẫu. Phương thức preventDefault() rất quan trọng - nó giống như nói với biểu mẫu, "Dừng lại một chút, đừng gửi dữ liệu này ngay bây giờ. Chúng ta muốn làm điều gì đó với nó trước!"

Phương thức kiểm tra tính hợp lệ DOM

Bây giờ, hãy nói về việc đảm bảo dữ liệu trong biểu mẫu của chúng ta là chính xác. Điều này được gọi là xác thực, và nó rất quan trọng để đảm bảo chúng ta nhận được thông tin chính xác từ người dùng.

Phương thức checkValidity()

Một trong những phương thức hữu ích nhất cho việc xác thực biểu mẫu là checkValidity(). Nó giống như có một giáo viên nhanh chóng quét qua bài tập của học sinh để đảm bảo mọi thứ đều ổn.

let emailInput = document.getElementById("email");

emailInput.addEventListener("blur", function() {
if (!emailInput.checkValidity()) {
console.log("Vui lòng nhập địa chỉ email hợp lệ");
}
});

Trong ví dụ này, chúng ta đang kiểm tra xem email input có hợp lệ khi người dùng kết thúc việc gõ (đó là ý nghĩa của sự kiện "blur"). Nếu nó không hợp lệ, chúng ta ghi một thông báo vào console. Trong một ứng dụng thực tế, bạn có thể muốn hiển thị thông báo này cho người dùng thay vì ghi vào console.

Phương thức reportValidity()

Trong khi checkValidity() chỉ kiểm tra xem đầu vào có hợp lệ hay không, reportValidity() lại đi một bước xa hơn. Nó không chỉ kiểm tra mà còn hiển thị thông báo cho người dùng nếu có điều gì đó sai sót.

let submitButton = document.getElementById("submit");

submitButton.addEventListener("click", function() {
if (!myForm.reportValidity()) {
console.log("Biểu mẫu có lỗi. Vui lòng sửa lỗi.");
} else {
console.log("Biểu mẫu hợp lệ. Đang gửi...");
}
});

Điều này giống như có một giáo viên không chỉ kiểm tra bài tập mà còn viết bình luận cho học sinh về những gì cần sửa.

Thuộc tính của thuộc tính 'validity'

Bây giờ chúng ta đã xem qua một số phương thức, hãy xem xét một số thuộc tính có thể giúp chúng ta với việc xác thực biểu mẫu.

Thuộc tính validity

Thuộc tính validity là một kho thông tin về trạng thái hợp lệ của đầu vào. Nó giống như một bản báo cáo chi tiết cho mỗi trường biểu mẫu.

let passwordInput = document.getElementById("password");

passwordInput.addEventListener("input", function() {
if (passwordInput.validity.tooShort) {
console.log("Mật khẩu quá ngắn!");
}
});

Trong ví dụ này, chúng ta đang kiểm tra xem mật khẩu có quá ngắn mỗi khi người dùng gõ cái gì đó. Nó giống như có một giáo viên nhìn qua vai học sinh và đưa ra phản hồi ngay lập tức!

Thuộc tính của thuộc tính 'validity'

Thuộc tính validity có một số thuộc tính của riêng nó, mỗi thuộc tính cho chúng ta biết một điều cụ thể về trạng thái của đầu vào. Hãy xem xét một số trong số đó:

Thuộc tính	Mô tả
valid	true nếu phần tử đáp ứng tất cả các ràng buộc xác thực
valueMissing	true nếu phần tử có thuộc tính required nhưng không có giá trị
typeMismatch	true nếu giá trị không ở định dạng yêu cầu (như địa chỉ email)
patternMismatch	true nếu giá trị không khớp với pattern đã chỉ định
tooLong	true nếu giá trị vượt quá maxLength
tooShort	true nếu giá trị ngắn hơn minLength
rangeUnderflow	true nếu giá trị nhỏ hơn thuộc tính min
rangeOverflow	true nếu giá trị lớn hơn thuộc tính max
stepMismatch	true nếu giá trị không phù hợp với quy tắc của thuộc tính step

Dưới đây là ví dụ về cách chúng ta có thể sử dụng một số trong số này:

let ageInput = document.getElementById("age");

ageInput.addEventListener("input", function() {
if (ageInput.validity.rangeUnderflow) {
console.log("Bạn phải ít nhất 18 tuổi!");
} else if (ageInput.validity.rangeOverflow) {
console.log("Bạn có chắc chắn mình già thế không?");
} else if (ageInput.validity.valid) {
console.log("Tuổi của bạn trông tốt!");
}
});

Mã này kiểm tra xem tuổi nhập vào có quá thấp, quá cao hay đúng không. Nó giống như Goldilocks kiểm tra cháo, nhưng cho các trường biểu mẫu!

Kết luận

Và đây là tất cả, các bạn! Chúng ta đã thực hiện những bước đầu tiên vào thế giới của API Forms JavaScript. Chúng ta đã học cách truy cập biểu mẫu, xử lý gửi biểu mẫu, xác thực đầu vào và thậm chí là đi sâu vào chi tiết của tính hợp lệ đầu vào.

Nhớ rằng việc thành thạo các khái niệm này cần thực hành. Đừng nản lòng nếu mọi thứ không ngay lập tức trở nên rõ ràng. Cũng giống như học骑自行车, nó có thể lung lay ban đầu, nhưng sớm bạn sẽ zoom đi, tạo ra các biểu mẫu tương tác và thân thiện với người dùng một cách dễ dàng!

Tiếp tục lập mã, tiếp tục học hỏi, và quan trọng nhất, tiếp tục vui vẻ với JavaScript!

Credits: Image by storyset