Nhận giá trị đầu vào khi gửi JavaScript
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 Show 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ử 9
Phần tử 9 có hai thuộc tính quan trọng. 1 và 2
Thông thường, bạn sử dụng phương pháp 7 khi muốn truy xuất dữ liệu từ máy chủ và phương pháp 6 khi bạn muốn thay đổi dữ liệu trên máy chủ JavaScript sử dụng đối tượng 0 để biểu diễn một biểu mẫu. 0 có các thuộc tính sau tương ứng với các thuộc tính HTML
Phần tử 0 cũng cung cấp các phương thức hữu ích sau
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 pháp chọn DOM như 2
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 ( 4) trên tài liệu
Để 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
Gửi biểu mẫuThô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ặc 6 với loại 7
Hoặc
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ẫu 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ẫu Để đí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ức 1 của phần tử biểu mẫu như sau
Để dừng gửi biểu mẫu, bạn gọi phương thức 2 của đối tượng 3 bên trong trình xử lý sự kiện 7 như thế này
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ức 9 của đối tượng biểu mẫu
Lưu ý rằng 7 không kích hoạt sự kiện 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ày 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, 2, 1, v.v. Ngoài ra, bạn có thể sử dụng thuộc tính 2 của đối tượng 3. Thuộc tính 4 lưu trữ một tập hợp các phần tử biểu mẫu 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ử 5
Để 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 0 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 1 Phần sau truy cập phần tử đầu vào thứ hai 2 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ạn 3 Đặ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 4 Tài liệu HTML tham khảo các tệp 7 và 8. Nó sử dụng phần tử 9 để hiển thị thông báo lỗi trong trường hợp phần tử 5 có dữ liệu không hợp lệ 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ỉnh 5 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ại 6 Sau đây hiển thị trường nhập tên trên biểu mẫu 7 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” 8 Tiếp theo, bạn cần chọn phần tử 9 9 Sau đó, cập nhật tin nhắn 0 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 1 Cuối cùng, trả về giá trị của loại 2 Hàm showError() và showSuccess()Các hàm 5 và 6 gọi hàm 2. Hàm 5 luôn trả về 9 trong khi hàm 6 luôn trả về 1. Ngoài ra, hàm 6 đặt thông báo lỗi thành một chuỗi trống 3 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àm 5 hoặc 6 tương ứng 4 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ệ 5 Hàm 6 gọi hàm 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ị 9 Để 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ị 01 |