Bài tập

Jquery - Bắt Lỗi Nhập Liệu Người Dùng Một Cách Nhanh Chóng

avatar
Huy Erick
00:00 12/04/2024

Hướng Dẫn Bắt Lỗi Nhập Liệu Người Dùng Bằng Jquery Bạn đã bao giờ gặp phải tình huống người dùng nhập liệu không đúng theo yêu cầu của bạn? Đừng lo lắng, trong bài viết...

Hướng Dẫn Bắt Lỗi Nhập Liệu Người Dùng Bằng Jquery

Bạn đã bao giờ gặp phải tình huống người dùng nhập liệu không đúng theo yêu cầu của bạn? Đừng lo lắng, trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng Jquery để bắt lỗi nhập liệu của người dùng một cách dễ dàng và nhanh chóng.

Bước 1: Chuẩn Bị Jquery

Đầu tiên, bạn cần tải và giải nén tệp Jquery validation từ đây. Sau đó, nhúng tệp CSS và tệp JQUERY vào trước thẻ trên trang web của bạn.

Bước 2: Nhúng Jquery Vào Form

Trong tệp mà bạn muốn bắt lỗi nhập liệu, hãy nhúng đoạn mã Jquery sau:

Xem thêm:

Trong đoạn mã trên, #formID là ID của form mà bạn muốn bắt lỗi. Hãy đảm bảo thay thế ID của form của bạn vào phần này.

Bước 3: Bắt Lỗi Các Trường Nhập Liệu

Để bắt lỗi các trường hoặc trong form của bạn, chỉ cần thêm class="validate[required] text-input" vào các trường đó.

Ví dụ:

Trong ví dụ trên, class "validate[required] text-input" sẽ bắt lỗi khi người dùng không nhập vào trường này.

Sự Kiện Bắt Lỗi Thông Dụng

Dưới đây là một số sự kiện bắt lỗi thông dụng:

  1. validate[required]: không được để rỗng
  2. validate[required,custom[url]]: nhập URL không hợp lệ
  3. validate[required,custom[phone]]: nhập số điện thoại không hợp lệ
  4. validate[required,custom[ip]]: nhập địa chỉ IP không hợp lệ
  5. validate[required,custom[email]]: nhập email không hợp lệ
  6. validate[required,equals[password]]: mật khẩu không trùng nhau
  7. validate[required,funcCall[checkXUANHUNG]]: quy định nhập một giá trị cụ thể, ví dụ: "XUANHUNG"

Bắt Lỗi Có Điều Kiện

Bạn cũng có thể bắt lỗi có điều kiện, ví dụ:

  1. validate[condRequired[dep1]]: nếu lớp được nhập liệu, trường tên phải được nhập
  2. validate[condRequired[dep2a,dep2b]]: nếu một trong hai ô có dữ liệu, trường có class này phải được nhập
  3. validate[required,minSize[6]]: số ký tự tối thiểu được nhập vào (thay số 6 bằng số khác nếu cần)
  4. validate[optional,maxSize[6]]: số ký tự tối đa được nhập vào (thay số 6 bằng số khác nếu cần)
  5. validate[required,custom[integer],min[-5]]: giá trị nhỏ nhất được nhập vào (thay số -5 bằng số khác nếu cần)
  6. validate[required,custom[integer],max[50]]: giá trị lớn nhất được nhập vào (thay số 50 bằng số khác nếu cần)
  7. validate[custom[date],past[2010/01/01]]: kiểm tra giá trị nhập là một ngày trong quá khứ (trước ngày 2010/01/01)
  8. validate[custom[date],future[NOW]]: kiểm tra giá trị nhập là một ngày trong tương lai (sau ngày hiện tại)

Bắt Lỗi Theo Nhóm

Bạn cũng có thể bắt lỗi theo nhóm, ví dụ:

  1. validate[groupRequired[payments]]: bạn phải nhập một trong các trường (ví dụ: credit card, PayPal account, bank account)
  2. validate[dateRange[grp1]]: bắt lỗi nếu khoảng ngày không hợp lệ

Trên đây là một số ví dụ về cách sử dụng Jquery để bắt lỗi nhập liệu của người dùng. Nếu bạn có bất kỳ thắc mắc nào, hãy để lại comment dưới đây và chúng tôi sẽ trả lời bạn trong thời gian sớm nhất. Cảm ơn bạn đã ghé thăm website của chúng tôi, nếu bài viết này hữu ích, hãy nhấn like hoặc +1 ở phía dưới.

BÀI LIÊN QUAN
1