HOTLINE: + (123) 1800-567-8990
Mon - Fri: 9:00 - 19:00
  • English
  • Việt Nam
Blog

Kiểm tra dữ liệu form với jQuery Validation

Để đảm bảo tính chính xác khi nhập dữ liệu và tránh tình trạng spam chúng ta nên kiểm tra dữ liệu nhập vào của form.

Hôm nay mình sẽ hướng dẫn các bạn kiểm tra dữ liệu form với jQuery Validation. Đây là một plugin của Javascript, nó kiểm tra dữ liệu form bằng Ajax, rất gọn nhẹ.

 

Đầu tiên nhúng thư viện jQuery vào project, sau đó download source từ trang chủ https://jqueryvalidation.org

Giải nén và vào thư mục dist

Copy file jquery.validate.js vào project. Nhúng vào.

Hoặc chúng ta có thể nhúng từ CDN :   https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js

Tạo 1 form đơn giản như dưới đây :

 

Giải thích một chút :

Ta có 1 form với id là validation, jQuery Validation sẽ sử dụng phương thức “validate()” với 2 thuộc tính chính là “rules” và “messages” lên form đó.

 

–  Rules sẽ đại điện cho những điều kiện xác thực như : lỗi bỏ trống, lỗi sai định dạng mail, … Các thuộc tính con trong Rules là name của thẻ input.

–   Messages sẽ đại diện cho các thông báo lỗi.

 

Một chú ý các điều kiện như : required, number, … ở trên Rules phải tương ứng với Messages ở dưới, kể cả vị trí, nếu không sẽ gây ra lỗi.

 

Ngoài những điều kiện xác thực thông dụng nói trên, còn rất nhiều kiểu khác, các bạn có thể tham khảo tại https://jqueryvalidation.org/documentation/

Tải source ví dụ trên ở đây.

 

Nếu có thắc mắc, hãy để lại comment, mình sẽ hướng dẫn chi tiết.

Tags:

Leave a comment