Chào mừng bạn đến với hướng dẫn nhanh về cách hiển thị thông báo lỗi trong biểu mẫu HTML. Đây có lẽ là một trong những lỗi lớn đối với một số người mới bắt đầu, làm cách nào để chúng tôi xử lý và hiển thị thông báo lỗi cho các biểu mẫu HTML?
Không có cách cố định nào để hiển thị lỗi trong biểu mẫu HTML, nhưng các phương pháp phổ biến để hiển thị thông báo lỗi là
- Chỉ cần thêm các thuộc tính kiểm tra vào các trường biểu mẫu HTML và trình duyệt sẽ tự động hiển thị các lỗi. Ví dụ, <input type="text" required>
- Sử dụng Javascript để hiển thị thông báo lỗi tùy chỉnh khi người dùng nhập vào các trường
- Hiển thị chung tất cả các thông báo lỗi trong hộp bật lên khi người dùng gửi biểu mẫu không hợp lệ
- Hiển thị thông báo lỗi bên dưới các trường không hợp lệ
Điều đó bao gồm những điều cơ bản rộng rãi, chúng ta hãy xem qua các ví dụ chi tiết trong hướng dẫn này – Đọc tiếp
ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào
MỤC LỤC
TẢI XUỐNG & LƯU Ý
Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa
GHI CHÚ NHANH
Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình
MÃ VÍ DỤ TẢI XUỐNG
Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn
THÔNG BÁO LỖI HIỂN THỊ
Được rồi, bây giờ chúng ta hãy xem các ví dụ khác nhau về hiển thị thông báo lỗi trong biểu mẫu HTML
VÍ DỤ 1) HIỂN THỊ LỖI MẶC ĐỊNH
1-mặc định. html
<form onsubmit="return false;"> <label for="fname">Name</label> <input type="text" name="fname" id="fname" required minlength="2" maxlength="8"> <label for="fnumber">Number</label> <input type="number" name="fnumber" id="fnumber" min="1" max="12"> <label for="fyes">Enter "Yes"</label> <input type="text" name="fyes" id="fyes" required pattern="Yes"> <input type="submit" value="Go!"> </form>Đó là tất cả những gì dành cho hướng dẫn và đây là một phần nhỏ về một số tính năng bổ sung và liên kết có thể hữu ích cho bạn
LIÊN KẾT và THAM KHẢO
- Mẫu HTML – MDN
- Trạng thái hiệu lực – MDN
- Xác thực biểu mẫu – MDN
- Xác thực biểu mẫu HTML không có Javascript – Code Boxx
KẾT THÚC
Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối. Tôi hy vọng rằng nó đã giúp bạn hiểu rõ hơn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc
Một biểu mẫu HTML chứa nhiều trường nhập khác nhau như hộp văn bản, hộp kiểm, nút radio, nút gửi và danh sách kiểm tra, v.v. Các trường nhập này cần được xác thực, điều này đảm bảo rằng người dùng đã nhập thông tin vào tất cả các trường bắt buộc và cũng xác thực rằng thông tin do người dùng cung cấp là hợp lệ và chính xác
Không có gì đảm bảo rằng thông tin do người dùng cung cấp luôn chính xác. PHP xác thực dữ liệu ở phía máy chủ, được gửi bằng biểu mẫu HTML. Bạn cần xác thực một vài điều
- chuỗi rỗng
- Xác thực chuỗi
- Xác thực số
- Xác thực thư điện tử
- Xác thực URL
- chiều dài đầu vào
chuỗi rỗng
Mã bên dưới kiểm tra xem trường có trống không. Nếu người dùng để trống trường bắt buộc, nó sẽ hiển thị thông báo lỗi. Đặt các dòng mã này để xác thực trường bắt buộc
Xác thực chuỗi
Đoạn mã dưới đây kiểm tra xem trường sẽ chỉ chứa các bảng chữ cái và khoảng trắng, ví dụ - tên. Nếu trường tên không nhận được đầu vào hợp lệ từ người dùng, thì nó sẽ hiển thị thông báo lỗi
Xác thực số
Đoạn mã dưới đây xác nhận rằng trường sẽ chỉ chứa một giá trị số. Ví dụ - Số điện thoại di động. Nếu trường Mobile no không nhận dữ liệu số từ người dùng, mã sẽ hiển thị thông báo lỗi
Xác thực thư điện tử
Một email hợp lệ phải chứa @ và. biểu tượng. PHP cung cấp nhiều phương thức khác nhau để xác thực địa chỉ email. Ở đây, chúng tôi sẽ sử dụng các biểu thức chính quy để xác thực địa chỉ email
Đoạn mã dưới đây xác thực địa chỉ email do người dùng cung cấp thông qua biểu mẫu HTML. Nếu trường không chứa địa chỉ email hợp lệ thì mã sẽ hiển thị thông báo lỗi
Xác thực độ dài đầu vào
Xác thực độ dài đầu vào hạn chế người dùng cung cấp giá trị trong phạm vi đã chỉ định, ví dụ - Số điện thoại di động. Số điện thoại di động hợp lệ phải có 10 chữ số
Mã đã cho sẽ giúp bạn áp dụng xác thực độ dài cho đầu vào của người dùng
Xác thực URL
Đoạn mã dưới đây xác thực URL của trang web do người dùng cung cấp qua biểu mẫu HTML. Nếu trường không chứa URL hợp lệ, mã sẽ hiển thị thông báo lỗi, tôi. e. , "URL không hợp lệ"
Nhấp vào nút Xác thực
Đoạn mã dưới đây xác thực rằng người dùng nhấp vào nút gửi và gửi dữ liệu biểu mẫu đến máy chủ theo một trong các phương thức sau - nhận hoặc đăng
Ghi chú. Hãy nhớ rằng xác thực và xác minh đều khác nhau
Bây giờ chúng tôi sẽ áp dụng tất cả các xác thực này cho một biểu mẫu HTML để xác thực các trường. Qua đó bạn có thể tìm hiểu chi tiết các mã này sẽ được sử dụng như thế nào để xác thực mẫu
Tạo biểu mẫu đăng ký bằng HTML và thực hiện xác thực phía máy chủ. Thực hiện theo các hướng dẫn dưới đây như được đưa ra
Tạo và xác thực một mẫu đăng ký
Khi đoạn mã trên chạy trên trình duyệt, đầu ra sẽ giống như ảnh chụp màn hình bên dưới
Điền vào mẫu đăng ký và nhấp vào nút Gửi. Nếu tất cả thông tin bắt buộc được cung cấp chính xác, đầu ra sẽ được hiển thị trên cùng một trang bên dưới nút gửi. Xem ảnh chụp màn hình bên dưới