Hướng dẫn Hướng dẫn sử dụng Jquey Validation Engine để bắt lỗi nhập dữ liệu

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,629
Được Like
10,889
Hướng dẫn sử dụng Jquey Validation Engine để bắt lỗi nhập dữ liệu

Việc bắt lỗi nhập dữ liệu là 1 bài toán không thể thiếu khi xây dựng website. Hôm nay mình sẽ hướng dẫn bạn sử dụng thư viện Jquey Validation Engine để giải quyết bài toán này. Thư viện này bắt lỗi khá đầy đủ các dạng lỗi như required, maxlength, minlength, email, url .... và hiển thị lỗi khá rõ ràng và chuyên nghiệp.

Điều đặc biệt là thư viện xây dựng từ jquery nên việc bắt lỗi sẽ xử lý ở trình duyệt người dùng thay vì ở server (tuy nhiên bạn vẫn cần phải bắt lỗi ở cả server để tránh tình trạng người dùng cố tình tắt javascript ở trình duyệt hoặc trình duyệt không hỗ trợ javascript nhé).

demo-jquery-validation-engine.png

Demo
Sau đây là hướng dẫn bạn sử dụng thư viện Jquey Validation Engine:

- Đầu tiên bạn khai báo đoạn mã sau trong tag <head></head> đầu trang web của bạn.
Mã:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" />
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>

- Dưới đây là ý nghĩa một số loại lỗi mà thư viện này có thể xử lý và cách sử dụng:

1. Required:
- Ý nghĩa: bắt buộc nhập dữ liệu.
- Cách sử dụng: khai báo class= "validate[required]" trong tag muốn bắt lỗi
2. Url:
- Ý nghĩa: Yêu cầu dữ liệu nhập phải đúng định dạng Url.
- Cách sử dụng: khai báo class = "validate[custom]" trong tag muốn bắt lỗi [B]3. Ema...thub.com/posabsolute/jQuery-Validation-Engine.

Chúc các bạn thành công.


Nguồn: blog.chuyenlaptrinh.net​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom