Làm cách nào để hiển thị thông báo lỗi bên dưới trường nhập liệu trong PHP?

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à

1. 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>
2. 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
3. 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ệ
4. 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

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

1. chuỗi rỗng
2. Xác thực chuỗi
3. Xác thực số
4. Xác thực thư điện tử
5. Xác thực URL
6. 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

Làm cách nào để hiển thị thông báo lỗi trong PHP?

Làm cách nào để hiển thị lỗi trên cùng một trang trong PHP?

Làm cách nào để thêm xác thực ở dạng PHP?

Làm cách nào để hiển thị thông báo lỗi bên trong hộp văn bản bằng javascript?