Mỗi biểu mẫu có thể chứa một mã JavaScript trong đó, đó là thứ chúng ta cần có thông báo Cảm ơn bên trong một cửa sổ bật lên
1. Chúng tôi cần chế độ xem biểu mẫu chính, trong trường hợp của chúng tôi, đó là phần tử có id
00Code language: JavaScript [javascript]
document.forms
This is my first part of the form.
Submit
2. Sau đó, chúng tôi sẽ tạo phần cảm ơn, hãy tạo một phần tử có id
01 và với thuộc tính kiểu ẩnCode language: JavaScript [javascript]
document.forms
Thí dụ
Thực thi JavaScript khi biểu mẫu được gửi
Nhập tên.
Tự mình thử »
Định nghĩa và cách sử dụng
Sự kiện onsubmit xảy ra khi một biểu mẫu được gửi
Hỗ trợ trình duyệt
EventonsubmitCóCóCóCóCócú pháp
Trong JavaScript, sử dụng phương thức addEventListener[]
sự vật. addEventListener["gửi", myScript];
Tự mình thử »chi tiết kỹ thuật
bong bóng. CóCó thể hủy. Có Loại sự kiện. Các thẻ HTML được hỗ trợ sự kiện. Phiên bản DOM. Sự kiện cấp 2Bả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 muốn lấy 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
30 để biểu diễn một biểu mẫu.Code language: JavaScript [javascript]
document.forms
30 có các thuộc tính sau tương ứng với các thuộc tính HTMLCode language: JavaScript [javascript]
document.forms
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]
9
Code language: JavaScript [javascript]document.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]
9document.forms
Phần tử
30 cũng cung cấp các phương thức hữu ích sauCode language: JavaScript [javascript]
document.forms
39 – gửi biểu mẫu
Code language: JavaScript [javascript]document.forms
30 – đặt lại biểu mẫu
Code language: HTML, XML [xml]
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
32Code language: HTML, XML [xml]
6Code language: HTML, XML [xml]
Một tài liệu HTML có thể có nhiều biểu mẫu. Thuộc tính
33 trả về một tập hợp các biểu mẫu [Code language: HTML, XML [xml]
34] trên tài liệuCode language: HTML, XML [xml]
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ử
35 hoặcCode language: HTML, XML [xml]
36 với loạiCode language: HTML, XML [xml]
37Code language: HTML, XML [xml]
3Code language: JavaScript [javascript]
document.forms
Hoặc
3Code language: HTML, XML [xml]
Nếu nút gửi có tiêu điểm và bạn nhấn phím
38, thì trình duyệt cũng gửi dữ liệu biểu mẫuCode language: HTML, XML [xml]
Khi bạn gửi biểu mẫu, sự kiện
37 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]
Để đính kèm một trình lắng nghe sự kiện vào sự kiện
37, bạn sử dụng phương thứcCode language: HTML, XML [xml]
91 của phần tử biểu mẫu như sauCode language: JavaScript [javascript]
document.forms
9Code language: JavaScript [javascript]
document.forms
Để dừng gửi biểu mẫu, bạn gọi phương thức
92 của đối tượngCode language: JavaScript [javascript]
document.forms
93 bên trong trình xử lý sự kiệnCode language: JavaScript [javascript]
document.forms
37 như thế nàyCode language: HTML, XML [xml]
4Code language: CSS [css]
document.forms[0]
Thông thường, bạn gọi phương thức
95 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]
document.forms
39 của đối tượng biểu mẫuCode language: JavaScript [javascript]
document.forms
7Code language: CSS [css]
document.forms[0]
Lưu ý rằng
97 không kích hoạt sự kiện
document.forms
Code language: JavaScript [javascript]
37. 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]
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ư
99,Code language: JavaScript [javascript]
document.forms
32,Code language: HTML, XML [xml]
41, v.v.Code language: CSS [css]
document.forms[0]
Ngoài ra, bạn có thể sử dụng thuộc tính
42 của đối tượngCode language: CSS [css]
document.forms[0]
43. Thuộc tínhCode language: CSS [css]
document.forms[0]
44 lưu trữ một tập hợp các phần tử biểu mẫuCode language: CSS [css]
document.forms[0]
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ử
35Code language: HTML, XML [xml]
7Code language: CSS [css]
document.forms[0]
Để 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
60Code language: HTML, XML [xml]
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
61Code language: HTML, XML [xml]
Phần sau truy cập phần tử đầu vào thứ hai
62Code language: HTML, XML [xml]
Sau khi truy cập một trường biểu mẫu, bạn có thể sử dụng thuộc tính
46 để truy cập giá trị của nó, chẳng hạnCode language: CSS [css]
document.forms[0]
63Code language: HTML, XML [xml]
Đặ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
64Code language: HTML, XML [xml]
Tài liệu HTML tham khảo các tệp
47 vàCode language: CSS [css]
document.forms[0]
48. Nó sử dụng phần tửCode language: CSS [css]
document.forms[0]
49 để hiển thị thông báo lỗi trong trường hợp phần tửCode language: CSS [css]
document.forms[0]
35 có dữ liệu không hợp lệCode language: HTML, XML [xml]
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
71 hoàn chỉnhCode language: CSS [css]
document.forms[0]
65Code language: HTML, XML [xml]
Làm thế nào nó hoạt động
Hàm showMessage[]
Hàm
72 chấp nhận một phần tử đầu vào, một thông báo và một loại
document.forms[0]
Code language: CSS [css]
66Code language: HTML, XML [xml]
Sau đây hiển thị trường nhập tên trên biểu mẫu
67Code language: HTML, XML [xml]
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à
73 với lớp “trường”Code language: CSS [css]
document.forms[0]
68Code language: HTML, XML [xml]
Tiếp theo, bạn cần chọn phần tử
49Code language: CSS [css]
document.forms[0]
69Code language: HTML, XML [xml]
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
75 vàCode language: CSS [css]
document.forms[0]
76 gọi hàmCode language: CSS [css]
document.forms[0]
72. HàmCode language: CSS [css]
document.forms[0]
75 luôn trả vềCode language: CSS [css]
document.forms[0]
79 trong khi hàmCode language: CSS [css]
document.forms[0]
76 luôn trả vềCode language: CSS [css]
document.forms[0]
71. Ngoài ra, hàmCode language: CSS [css]
document.forms[0]
76 đặt thông báo lỗi thành một chuỗi trốngCode language: CSS [css]
document.forms[0]
3Code language: JavaScript [javascript]
document.forms
Hàm hasValue[]
Hàm
73 kiểm tra xem một 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: CSS [css]
document.forms[0]
75 hoặcCode language: CSS [css]
document.forms[0]
76 tương ứngCode language: CSS [css]
document.forms[0]
4Code language: JavaScript [javascript]
document.forms
Hàm xác thựcEmail[]
Hàm
76 xác thực nếu trường email chứa địa chỉ email hợp lệCode language: CSS [css]
document.forms[0]
5Code language: JavaScript [javascript]
document.forms
Hàm
76 gọi hàmCode language: CSS [css]
document.forms[0]
73 để 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: CSS [css]
document.forms[0]
79Code language: CSS [css]
document.forms[0]
Để 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
76 hiển thịCode language: CSS [css]
document.forms[0]
601Code language: HTML, XML [xml]