Nhà phát triển web thường sẽ sử dụng hàm JavaScript để gửi biểu mẫu JavaScript khi họ muốn thay đổi loại nội dung thành JSON để gửi phía máy chủ thông qua yêu cầu HTTP
Mục lục
Giới thiệu
Từ khi một người ở đất nước này trở thành một thanh niên, anh ta sẽ thường thấy mình trong tình huống điền vào biểu mẫu HTML. Nó có thể là một cái gì đó đơn giản và trần tục như đăng ký để sử dụng ứng dụng truyền thông xã hội yêu thích của anh ấy hoặc cô ấy
Như đã nói, có nhiều trường hợp sử dụng trong Phát triển web trong đó Ứng dụng web sẽ phải xử lý hành vi gửi biểu mẫu và có một số cách để gửi biểu mẫu. Có thể xử lý việc gửi biểu mẫu bằng thuộc tính hành động của
phần tử hoặc nhà phát triển có thể chọn sử dụng chức năng javascript thay thế. Tất nhiên, một nhà phát triển cũng có thể làm cả haiĐể sử dụng thuộc tính hành động của thành phần biểu mẫu, biểu mẫu sẽ giống như sau
…
Trong ví dụ trên, loại nội dung là application/x-www-form-urlencoded. Loại nội dung này thường được xử lý bởi tệp PHP. URL của tệp PHP này sẽ là giá trị của thuộc tính hành động
Mặt khác, nhà phát triển web thường sẽ sử dụng hàm JavaScript khi họ muốn thay đổi loại nội dung thành JSON để gửi phía máy chủ thông qua yêu cầu HTTP. Hàm javascript này có thể được gọi từ các thuộc tính cụ thể trên hoặc trong biểu mẫu hoặc sự kiện gửi có thể được sử dụng làm tham số trong phương thức addEventListener. Chúng tôi thường gọi hàm JavaScript này là trình xử lý sự kiện. Trình xử lý sự kiện lấy một đối tượng sự kiện làm một trong các tham số của nó
Hãy nhìn vào một số mã
Một ví dụ khá đơn giản về biểu mẫu HTML sẽ như sau
Subscribe
Ở trên, là mã HTML của một hình thức đăng ký phổ biến. Trong số những thứ khác, biểu mẫu HTML này chứa hai phần tử đại diện cho các trường văn bản. Một phần tử
chụp tên của người dùng và phần còn lại chụp email của người dùng. Và có nút gửi để xử lý dữ liệu sau khi người dùng nhập xong vào biểu mẫu
Nhà phát triển cũng có thể sử dụng một thay vì phần tử. Phần tử nút thường được sử dụng khi nhà phát triển dự định tạo kiểu bổ sung cho nút
Một ví dụ về trình xử lý sự kiện xử lý sự kiện gửi của biểu mẫu HTML ở trên sẽ như sau
Người giới thiệu
1. “Hình thức – Phản ứng. ” Phản ứng, https. //reacjs. org/tài liệu/biểu mẫu. html. Truy cập ngày 21 tháng 8 năm 2022
2. “sự kiện onsubmit. ” W3Schools, https. //www. w3schools. com/jsref/event_onsubmit. asp. Truy cập ngày 21 tháng 8 năm 2022
3. “HTMLFormElement. gửi sự kiện - API Web. MDN. ” MDN Web Docs, ngày 9 tháng 7 năm 2022, https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/HTMLFormElement/submit\_event. Truy cập ngày 21 tháng 8 năm 2022
4. “Gửi biểu mẫu dữ liệu - Tìm hiểu phát triển web. MDN. ” MDN Web Docs, ngày 15 tháng 8 năm 2022, https. // nhà phát triển. mozilla. org/en-US/docs/Learn/Forms/Sending\_ and\_ retrieving\form\data. Truy cập ngày 21 tháng 8 năm 2022
Bản tóm tắt. trong hướng dẫn này, bạn sẽ tìm hiểu về JavaScript form API. truy cập biểu mẫu, nhận giá trị của các phần tử, xác thực dữ liệu biểu mẫu và gửi biểu mẫu
Khái niệm cơ bản về biểu mẫu
Để tạo biểu mẫu trong HTML, bạn sử dụng phần tử
9Code language: JavaScript [javascript]
document.forms
Code language: HTML, XML [xml]
Phần tử
9 có hai thuộc tính quan trọng.Code language: JavaScript [javascript]
document.forms
1 vàCode language: CSS [css]
document.forms[0]
2Code language: CSS [css]
document.forms[0]
- Thuộc tính
1 chỉ định một URL sẽ xử lý việc gửi biểu mẫu. Trong ví dụ này, hành động là URL
Code language: CSS [css]document.forms[0]
4
Code language: CSS [css]document.forms[0]
- Thuộc tính
2 chỉ định phương thức HTTP để gửi biểu mẫu với. Thông thường, phương pháp này là
Code language: CSS [css]document.forms[0]
6 hoặc
Code language: CSS [css]document.forms[0]
7
Code language: CSS [css]document.forms[0]
Nói chung, bạn sử dụng phương pháp
7 khi bạn muốn truy xuất dữ liệu từ máy chủ và phương phápCode language: CSS [css]
document.forms[0]
6 khi bạn muốn thay đổi dữ liệu trên máy chủCode language: CSS [css]
document.forms[0]
JavaScript sử dụng đối tượng
0 để biểu diễn một biểu mẫu.Code language: HTML, XML [xml]
0 có các thuộc tính sau tương ứng với các thuộc tính HTMLCode language: HTML, XML [xml]
1 – là URL xử lý dữ liệu biểu mẫu. Nó tương đương với thuộc tính
Code language: CSS [css]document.forms[0]
1 của phần tử
Code language: CSS [css]document.forms[0]
9document.forms
2 – là phương thức HTTP tương đương với thuộc tính
Code language: CSS [css]document.forms[0]
2 của phần tử
Code language: CSS [css]document.forms[0]
9
Code language: JavaScript [javascript]document.forms
Phần tử
0 cũng cung cấp các phương thức hữu ích sauCode language: HTML, XML [xml]
9 – gửi biểu mẫu
Code language: HTML, XML [xml]
0 – đặt lại biểu mẫu
Code language: HTML, XML [xml]Subscribe
biểu mẫu tham khảo
Để tham chiếu phần tử
9, bạn có thể sử dụng các phương thức chọn DOM nhưCode language: JavaScript [javascript]
document.forms
2Code language: HTML, XML [xml]
Subscribe
Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Một tài liệu HTML có thể có nhiều biểu mẫu. Thuộc tính
3 trả về một tập hợp các biểu mẫu [Code language: HTML, XML [xml]
Subscribe
4] trên tài liệuCode language: HTML, XML [xml]
Subscribe
Code language: JavaScript [javascript]
document.forms
Để tham khảo một biểu mẫu, bạn sử dụng một chỉ mục. Ví dụ: câu lệnh sau trả về dạng đầu tiên của tài liệu HTML
Code language: CSS [css]
document.forms[0]
Gửi biểu mẫu
Thông thường, một biểu mẫu có một nút gửi. Khi bạn nhấp vào nó, trình duyệt sẽ gửi dữ liệu biểu mẫu đến máy chủ. Để tạo nút gửi, bạn sử dụng phần tử
5 hoặcCode language: HTML, XML [xml]
Subscribe
6 với loạiCode language: HTML, XML [xml]
Subscribe
7Code language: HTML, XML [xml]
Subscribe
Code language: HTML, XML [xml]
Hoặc
Code language: HTML, XML [xml]
Subscribe
Nếu nút gửi có tiêu điểm và bạn nhấn phím
8, thì trình duyệt cũng gửi dữ liệu biểu mẫuCode language: HTML, XML [xml]
Subscribe
Khi bạn gửi biểu mẫu, sự kiện
7 sẽ được kích hoạt trước khi yêu cầu được gửi đến máy chủ. Điều này cho bạn cơ hội xác thực dữ liệu biểu mẫu. Nếu dữ liệu biểu mẫu không hợp lệ, bạn có thể ngừng gửi biểu mẫuCode language: HTML, XML [xml]
Subscribe
Để đính kèm một trình lắng nghe sự kiện vào sự kiện
7, bạn sử dụng phương thứcCode language: HTML, XML [xml]
Subscribe
1 của thành phần biểu mẫu như sauCode language: JavaScript [javascript]
const form = document.getElementById['signup']; form.addEventListener['submit', [event] => { // handle the form data }];
Code language: JavaScript [javascript]
const form = document.getElementById['signup']; form.addEventListener['submit', [event] => { // handle the form data }];
Để dừng gửi biểu mẫu, bạn gọi phương thức
2 của đối tượngCode language: JavaScript [javascript]
const form = document.getElementById['signup']; form.addEventListener['submit', [event] => { // handle the form data }];
3 bên trong trình xử lý sự kiệnCode language: JavaScript [javascript]
const form = document.getElementById['signup']; form.addEventListener['submit', [event] => { // handle the form data }];
7 như thế nàyCode language: HTML, XML [xml]
Subscribe
Code language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
Thông thường, bạn gọi phương thức
5 nếu dữ liệu biểu mẫu không hợp lệ. Để gửi biểu mẫu trong JavaScript, bạn gọi phương thứcCode language: JavaScript [javascript]
const form = document.getElementById['signup']; form.addEventListener['submit', [event] => { // handle the form data }];
9 của đối tượng biểu mẫuCode language: HTML, XML [xml]
Code language: CSS [css]
form.submit[];
Lưu ý rằng
7 không kích hoạt sự kiệnCode language: JavaScript [javascript]
const form = document.getElementById['signup']; form.addEventListener['submit', [event] => { // handle the form data }];
7. Do đó, bạn phải luôn xác thực biểu mẫu trước khi gọi phương thức nàyCode language: HTML, XML [xml]
Subscribe
Truy cập các trường biểu mẫu
Để truy cập các trường biểu mẫu, bạn có thể sử dụng các phương thức DOM như
9,Code language: JavaScript [javascript]
const form = document.getElementById['signup']; form.addEventListener['submit', [event] => { // handle the form data }];
2,Code language: HTML, XML [xml]
Subscribe
1, v.v.Code language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
Ngoài ra, bạn có thể sử dụng thuộc tính
2 của đối tượngCode language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
3. Thuộc tínhCode language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
4 lưu trữ một tập hợp các phần tử biểu mẫuCode language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
JavaScript cho phép bạn truy cập một phần tử theo chỉ mục, id hoặc tên. Giả sử rằng bạn có biểu mẫu đăng ký sau với hai phần tử
5Code language: HTML, XML [xml]
Subscribe
Code language: HTML, XML [xml]
Sign Up Name: Email: Subscribe
Để truy cập các phần tử của biểu mẫu, trước tiên bạn lấy phần tử biểu mẫu
0Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Và sử dụng chỉ mục, id hoặc tên để truy cập phần tử. Phần sau truy cập phần tử biểu mẫu đầu tiên
1Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Phần sau truy cập phần tử đầu vào thứ hai
2Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Sau khi truy cập một trường biểu mẫu, bạn có thể sử dụng thuộc tính
6 để truy cập giá trị của nó, chẳng hạnCode language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
3Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Đặt nó tất cả cùng nhau. hình thức đăng ký
Sau đây minh họa tài liệu HTML có biểu mẫu đăng ký. Xem demo trực tiếp tại đây
4Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Tài liệu HTML tham khảo các tệp
7 vàCode language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
8. Nó sử dụng phần tửCode language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
9 để hiển thị thông báo lỗi trong trường hợp phần tửCode language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
5 có dữ liệu không hợp lệCode language: HTML, XML [xml]
Subscribe
Gửi biểu mẫu mà không cung cấp bất kỳ thông tin nào sẽ dẫn đến lỗi sau
Gửi biểu mẫu có tên nhưng định dạng địa chỉ email không hợp lệ sẽ dẫn đến lỗi sau
Phần sau hiển thị tệp
1 hoàn chỉnhCode language: CSS [css]
form.submit[];
5Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Làm thế nào nó hoạt động
Hàm showMessage[]
Hàm
2 chấp nhận một phần tử đầu vào, một thông báo và một loạiCode language: CSS [css]
form.submit[];
6Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Sau đây hiển thị trường nhập tên trên biểu mẫu
7Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Nếu giá trị của tên trống, trước tiên bạn cần lấy cha của nó là
3 với lớp “trường”Code language: CSS [css]
form.submit[];
8Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Tiếp theo, bạn cần chọn phần tử
9Code language: PHP [php]
form.addEventListener['submit', [event] => { // stop form submission event.preventDefault[]; }];
9Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];
Sau đó, cập nhật tin nhắn
0Code language: JavaScript [javascript]
document.forms
Sau đó, chúng tôi thay đổi lớp CSS của trường đầu vào dựa trên giá trị của tham số loại. Nếu loại là đúng, chúng tôi thay đổi lớp của đầu vào thành công. Nếu không, chúng tôi thay đổi lớp thành lỗi
1Code language: JavaScript [javascript]
document.forms
Cuối cùng, trả về giá trị của loại
2Code language: JavaScript [javascript]
document.forms
Hàm showError[] và showSuccess[]
Hàm
5 vàCode language: CSS [css]
form.submit[];
6 gọi hàmCode language: CSS [css]
form.submit[];
2. HàmCode language: CSS [css]
form.submit[];
5 luôn trả vềCode language: CSS [css]
form.submit[];
9 trong khi hàmCode language: CSS [css]
form.submit[];
6 luôn trả vềCode language: CSS [css]
form.submit[];
1. Ngoài ra, hàmCode language: HTML, XML [xml]
Sign Up Name: Email: Subscribe
6 đặt thông báo lỗi thành một chuỗi trốngCode language: CSS [css]
form.submit[];
3Code language: JavaScript [javascript]
document.forms
Hàm hasValue[]
Hàm
3 kiểm tra xem phần tử đầu vào có giá trị hay không và hiển thị thông báo lỗi bằng cách sử dụng hàmCode language: HTML, XML [xml]
Sign Up Name: Email: Subscribe
5 hoặcCode language: CSS [css]
form.submit[];
6 tương ứngCode language: CSS [css]
form.submit[];
4Code language: JavaScript [javascript]
document.forms
Hàm xác thựcEmail[]
Hàm
6 xác thực nếu trường email chứa địa chỉ email hợp lệCode language: HTML, XML [xml]
Sign Up Name: Email: Subscribe
5Code language: JavaScript [javascript]
document.forms
Hàm
6 gọi hàmCode language: HTML, XML [xml]
Sign Up Name: Email: Subscribe
3 để kiểm tra xem giá trị trường có trống không. Nếu trường đầu vào trống, nó sẽ hiển thịCode language: HTML, XML [xml]
Sign Up Name: Email: Subscribe
9Code language: HTML, XML [xml]
Sign Up Name: Email: Subscribe
Để xác thực email, nó sử dụng biểu thức chính quy. Nếu email không hợp lệ, hàm
6 sẽ hiển thịCode language: HTML, XML [xml]
Sign Up Name: Email: Subscribe
01Code language: JavaScript [javascript]
const form = document.getElementById['subscribe'];