Validation trong Jquery

Để bắt đầu, chúng ta cần hiểu rõ về validation. Validation là quá trình kiểm tra dữ liệu nhập vào có hợp lệ hay không. Điều này rất quan trọng để tránh việc dữ liệu không hợp lệ được lưu trữ và sử dụng trong hệ thống.

Sử dụng jQuery, chúng ta có thể dễ dàng thực hiện việc validation cho một form. Đầu tiên, chúng ta cần kết nối thư viện jQuery vào trang web của chúng ta. Sau đó, chúng ta có thể sử dụng các hàm validate() của jQuery để kiểm tra dữ liệu nhập vào.

jQuery Validate

jQuery Validate là một plugin mạnh mẽ và dễ sử dụng cho việc xác nhận dữ liệu nhập vào trong một form. Nó cung cấp nhiều tùy chọn và các quy tắc xác nhận để giúp bạn kiểm tra dữ liệu nhập vào một cách dễ dàng và hiệu quả.

Bằng cách sử dụng jQuery Validate, bạn có thể tạo một form đảm bảo dữ liệu nhập vào là chính xác và tốt nhất, giúp tăng tính trải nghiệm cho người dùng và giảm tải cho máy chủ.

Ví dụ:

$(document).ready(function () {
  $("form").validate({
    rules: {
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    messages: {
      email: {
        required: "Vui lòng nhập email",
        email: "Email không hợp lệ"
      },
      password: {
        required: "Vui lòng nhập mật khẩu",
        minlength: "Mật khẩu phải có ít nhất 5 ký tự"
      }
    }
  });
});

Trong ví dụ trên, chúng ta đang kiểm tra hai trường email và password. Các quy tắc định nghĩa trong thuộc tính rules bao gồm yêu cầu nhập vào của email và password, và kiểm tra định dạng email. Các thông báo lỗi định nghĩa trong thuộc tính messages sẽ hiển thị khi các rules không thoải mãn.

Để hiển thị một form có validation, chúng ta cần tạo một form HTML và sử dụng các thuộc tính của jQuery validate để xác nhận dữ liệu nhập vào:

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
  </head>
  <body>
    <form>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
      </div>
      <input type="submit" value="Submit">
    </form>
    <script>
      $(document).ready(function () {
        $("form").validate({
          rules: {
            email: {
              required: true,
              email: true
            },
            password: {
              required: true,
              minlength: 5
            }
          },
          messages: {
            email: {
              required: "Vui lòng nhập email",
              email: "Email không hợp lệ"
            },
            password: {
              required: "Vui lòng nhập mật khẩu",
              minlength: "Mật khẩu phải có ít nhất 5 ký tự"
            }
          }
        });
      });
    </script>
  </body>
</html>

Trong ví dụ trên, chúng ta đã tạo một form có hai trường email và password. Sử dụng thư viện jQuery và plugin jQuery Validate, chúng ta có thể kiểm tra dữ liệu nhập vào và hiển thị các thông báo lỗi nếu có.

Bạn có thể tham khảo các tài liệu sau để tìm hiểu thêm về việc sử dụng jQuery Validate: