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

  • January 24, 2018
  • Si Hoang
  • Blog
  • 0 comments

Để đả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 sau đó 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à validationjQuery 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.

Leave a comment