Share Kiểm tra tính hợp lệ của dữ liệu với thư viện jQuery Validation

filiallion · 04/04/2018

Khi các bạn lập trình website với các form thì việc kiểm tra tính hợp lệ của dữ liệu bằng các thư viện của ngôn ngữ lập trình như PHP chẳng hạn là bắt buộc. Ngoài ra, để website có tính tương tác tối với người dùng thì các bạn còn kiểm tra tính hợp lệ của dữ liệu ngay trên máy khách. Để làm việc này thì sử dụng JavaScript là cần thiết và để sử dụng đơn giản, nhanh chóng thì thư viện jQuery Validation là thư viện mà các bạn nên quan tâm.

Để sử dụng thư viện jQuery Validation cũng khá đơn giản, các bạn truy cập địa chỉ https://jqueryvalidation.org để tải thư viện và tích hợp thư viện vào website với dòng lệnh như sau:

HTML:

<script src="path/to/jquery.validate.min.js"></script>

Các bạn lưu ý là thư viện jQuery Validation yêu cầu phải có thư viện jQuery. Nếu website chưa tích hợp thư viện jQuery, các bạn có thể tải thư viện jQuery tại địa chỉ http://jquery.com/download.

Ví dụ để kiểm tra tính hợp lệ dữ liệu của form sau:

HTML:

<form name="user" id="user" method="post" action="">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="Submit">
</form>

Kiểm tra tính hợp lệ của dữ liệu ở form trên với nội dung mã lệnh JavaScript như sau:

JavaScript:

$(function() {
    $('#user').validate({
        rules: {
            username: {
                required: true,
                minlength: 6
            },
            password: {
                required: true,
                minlength: 6
            }
        },
        messages: {
            username: {
                required: 'Vui lòng nhập tài khoản',
                minlength: 'Tài khoản phải có ít nhất 6 ký tự'
            },
            password: {
                required: 'Vui lòng nhập mật khẩu',
                minlength: 'Mật khẩu phải có ít nhất 6 ký tự'
            }
        }
    });
});

Ngoài cách cài đặt bằng mã lệnh JavaScript như trên thì các bạn còn có thể kiểm tra tính hợp lệ dữ liệu của form bằng cách khai báo các thuộc tính HTML5. Các bạn có thể tìm hiểu thêm về thư viện jQuery Validation tại địa chỉ https://jqueryvalidation.org/documentation.

Share Kiểm tra tính hợp lệ của dữ liệu với thư viện jQuery Validation

filiallion

Administrator