Việc bắt lỗi nhập 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é).
 |
| Hình 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.
<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 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[url]]" trong tag muốn bắt lỗi
3. Email:
- Ý nghĩa: Yêu cầu dữ liệu nhập phải đúng định dạng địa chỉ Email.
- Cách sử dụng: khai báo class = "validate[custom[email]]" trong tag muốn bắt lỗi
4. Equals:
- Ý nghĩa: Yêu cầu dữ liệu của tag này phải bằng với dữ liệu của tag khác
- Cách sử dụng: khai báo class = "validate[equas[idcuatagkhac]]". idcuatagkhac thì bạn truyền vào là id của tag muốn so sánh. Ví dụ mình có 1 tag input với id="password", bây giờ mình tạo tag Confirm Password và mình yêu cầu dữ liệu ở tag Confirm Password phải bằng với tag Password thì mình viết như sau <input type="password" name="confirmpassword" class="validate[equals[password]]" />
5. Minimum field size
1. Required:
- Ý nghĩa: bắt buộc nhập 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[url]]" trong tag muốn bắt lỗi
3. Email:
- Ý nghĩa: Yêu cầu dữ liệu nhập phải đúng định dạng địa chỉ Email.
- Cách sử dụng: khai báo class = "validate[custom[email]]" trong tag muốn bắt lỗi
4. Equals:
- Ý nghĩa: Yêu cầu dữ liệu của tag này phải bằng với dữ liệu của tag khác
- Cách sử dụng: khai báo class = "validate[equas[idcuatagkhac]]". idcuatagkhac thì bạn truyền vào là id của tag muốn so sánh. Ví dụ mình có 1 tag input với id="password", bây giờ mình tạo tag Confirm Password và mình yêu cầu dữ liệu ở tag Confirm Password phải bằng với tag Password thì mình viết như sau <input type="password" name="confirmpassword" class="validate[equals[password]]" />
5. Minimum field size
- Ý nghĩa: Số lượng ký tự tối thiểu phải nhập
- Cách sử dụng: khai báo class = "validate[minSize[number]]". number bạn thay bằng số lượng ký tự tối thiểu. Ví dụ class = "validate[minSize[6]]" để chỉ định độ dài của chuỗi dữ liệu phải tối thiểu là 6.
6. Number
- Ý nghĩa: Phải nhập 1 con số.
- Cách sử dụng khai báo class = "validate[custom[number]]" trong tag muốn bắt lỗi
7. IP
- Ý nghĩa: Phải nhập 1 địa chỉ IP hợp lệ.
- Cách sử dụng khai báo class = "validate[custom[ipv4]]" trong tag muốn bắt lỗi
Chú ý: Bạn có thể kết hợp bắt lỗi nhiều dạng trong 1 tag như thế này nhé: <input type="validate[required, custom[email]]"
Bước cuối cùng là khai báo lệnh sau cuối thẻ body nhé:
Chú ý: Bạn có thể kết hợp bắt lỗi nhiều dạng trong 1 tag như thế này nhé: <input type="validate[required, custom[email]]"
Bước cuối cùng là khai báo lệnh sau cuối thẻ body nhé:
<script>
jQuery(document).ready(function(){
$('#idform').validationEngine();
});
</script>
Bạn nhớ thay idform thành id của tag form trong trang bạn nhé.
Còn nhiều thứ nữa bạn có thể khám phá tại địa chỉ https://github.com/posabsolute/jQuery-Validation-Engine hoặc https://chuyenlaptrinh.net/pages/demo-jquery-validation-engine
Theo dõi blog bằng cách điền email vào form đăng ký cuối trang web nhé.
EmoticonEmoticon