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

Xin chào, các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của JavaScript và DOM Forms. Là người dạy máy tính hàng xóm thân thiện của bạn, tôi sẽ dẫn đường cho bạn từng bước trong hành trình này. Hãy chuẩn bị đồ uống yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu cuộc phiêu lưu này!

JavaScript - DOM Forms

DOM Forms là gì?

Trước khi chúng ta nhảy vào chi tiết của JavaScript và form, hãy dành một chút thời gian để hiểu DOM Forms là gì. DOM là viết tắt của Document Object Model, và nó cơ bản là một cách để JavaScript tương tác với các phần tử HTML trên trang web.

Hãy tưởng tượng DOM như một gia đình của trang web của bạn. Mỗi phần tử giống như một thành viên trong gia đình, và JavaScript là anh em họ cool có thể trò chuyện với mọi người và làm cho mọi thứ xảy ra!

Bây giờ, khi nói đến form, chúng giống như các bảng câu hỏi tương tác của thế giới web. Chúng cho phép người dùng nhập liệu, làm lựa chọn, và gửi thông tin đến các trang web. Hãy nhìn vào một form HTML đơn giản:

<form id="myForm">
<label for="name">Tên:</label>
<input type="text" id="name" name="name">
<button type="submit">Gửi</button>
</form>

Form này có một trường nhập liệu cho tên và một nút gửi. Rất đơn giản, phải không? Bây giờ, hãy xem chúng ta có thể tương tác với form này như thế nào bằng JavaScript!

Gửi form bằng JavaScript

Khi một người dùng điền đầy đủ form và nhấn nút gửi, chúng ta thường muốn làm gì đó với dữ liệu đó trước khi gửi nó đến máy chủ. Đây là nơi JavaScript rất hữu ích!

Dưới đây là một ví dụ về cách chúng ta có thể xử lý việc gửi form bằng JavaScript:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Ngăn không cho form gửi đi bình thường

var name = document.getElementById('name').value;
console.log('Xin chào, ' + name + '!');
});

Hãy phân tích này:

Chúng ta đang chọn form của mình bằng document.getElementById('myForm').
Chúng ta đang thêm một bộ监听 sự kiện cho sự kiện 'submit'.
event.preventDefault() ngăn form gửi đi bình thường ( Điều này sẽ làm trang tải lại).
Chúng ta đang lấy giá trị của trường nhập liệu tên và ghi một lời chào vào console.

Bây giờ, khi bạn gửi form, thay vì trang tải lại, bạn sẽ thấy một lời chào trong console. Cool phải không?

Xác thực form bằng JavaScript

Xác thực form giống như có một bảo vệ thân thiện ở câu lạc bộ. Nó kiểm tra xem mọi thứ có ổn không trước khi cho dữ liệu qua. Hãy xem cách chúng ta có thể xác thực form của mình bằng JavaScript:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;

if (name.trim() === '') {
alert('Vui lòng nhập tên của bạn!');
} else {
console.log('Xin chào, ' + name + '!');
}
});

Trong ví dụ này, chúng ta đang kiểm tra xem trường tên có trống không (hoặc chỉ chứa khoảng trống). Nếu có, chúng ta hiển thị một thông báo yêu cầu người dùng nhập tên. Nếu không, chúng ta ghi lời chào.

Xác thực dữ liệu form bằng JavaScript

Đôi khi, chúng ta cần xác thực dữ liệu phức tạp hơn. Hãy nói chúng ta muốn thêm một trường email vào form và đảm bảo nó là địa chỉ email hợp lệ:

<form id="myForm">
<label for="name">Tên:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Gửi</button>
</form>

Và đây là cách chúng ta có thể xác thực nó:

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;
var email = document.getElementById('email').value;

if (name.trim() === '') {
alert('Vui lòng nhập tên của bạn!');
return;
}

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('Vui lòng nhập địa chỉ email hợp lệ!');
return;
}

console.log('Xin chào, ' + name + '! Chúng tôi sẽ liên hệ với bạn tại ' + email);
});

Trong ví dụ này, chúng ta đang sử dụng một biểu thức chính quy để kiểm tra xem email có hợp lệ không. Đừng lo lắng nếu điều đó trông như một hỗn độn - biểu thức chính quy là chủ đề cho một ngày khác!

Xác thực form bằng HTML Constraints

Bây giờ, đây là một bí mật nhỏ: HTML5 có một số tính năng xác thực form内置 có thể làm cho cuộc sống của chúng ta dễ dàng hơn. Hãy cập nhật form của chúng ta để sử dụng những tính năng này:

<form id="myForm">
<label for="name">Tên:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Gửi</button>
</form>

Bằng cách thêm thuộc tính required vào các trường nhập liệu và sử dụng type="email" cho trường email, chúng ta nhận được một số xác thực cơ bản miễn phí! Trình duyệt sẽ ngăn không cho form gửi đi và hiển thị các thông báo lỗi nếu các trường này trống hoặc không hợp lệ.

Nhưng chúng ta vẫn có thể sử dụng JavaScript để tùy chỉnh hành vi này:

document.getElementById('myForm').addEventListener('submit', function(event) {
if (!this.checkValidity()) {
event.preventDefault();
alert('Vui lòng điền đầy đủ tất cả các trường chính xác!');
} else {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
console.log('Xin chào, ' + name + '! Chúng tôi sẽ liên hệ với bạn tại ' + email);
}
});

Mã này kiểm tra xem form có hợp lệ theo các ràng buộc HTML không. Nếu không, chúng ta ngăn không cho form gửi đi và hiển thị một thông báo. Nếu có, chúng ta tiếp tục với lời chào.

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau đi qua thế giới của JavaScript và DOM Forms, từ gửi form cơ bản đến xác thực và hơn thế nữa. Nhớ rằng, form giống như cuộc trò chuyện giữa trang web của bạn và người dùng. Với JavaScript, bạn đang đảm bảo rằng cuộc trò chuyện đó diễn ra mượt mà và mọi người đều hiểu nhau.

Dưới đây là bảng tóm tắt các phương thức chúng ta đã sử dụng:

Phương thức	Mô tả
`document.getElementById()`	Chọn một phần tử bằng ID
`addEventListener()`	Đính kèm một bộ监听 sự kiện vào phần tử
`event.preventDefault()`	Ngăn không cho sự kiện mặc định xảy ra
`element.value`	Lấy hoặc đặt giá trị của phần tử form
`alert()`	Hiển thị một thông báo popup cho người dùng
`console.log()`	Ghi một thông báo vào console
`form.checkValidity()`	Kiểm tra xem form có thỏa mãn tất cả các ràng buộc xác thực không

Tiếp tục thực hành, tiếp tục lập trình, và trước khi bạn biết, bạn sẽ tạo ra những trải nghiệm web tương tác tuyệt vời! Nhớ rằng, mỗi chuyên gia từng là người mới bắt đầu. Vậy đừng nản lòng nếu mọi thứ không ngay lập tức trở nên rõ ràng. Hãy tiếp tục cố gắng, và bạn sẽ ngạc nhiên với những gì bạn có thể đạt được!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Phần tử DOM

Hướng Dẫn Tiếp Theo:

JavaScript - Thay đổi HTML