Tìm hiểu về Jquery Validation (Phần 1) (ok)

https://viblo.asia/p/tim-hieu-ve-jquery-validation-phan-1-E375zEqRlGW

Sau đây, tôi sẽ giới thiệu với bạn về Jquery Validation - một Plugin mà tôi đang dùng trong dự án.

Tổng quan về Jquery Validation

Jquery Validation giúp cho việc validate ở clientside trở nên dễ dàng hơn, trong khi vẫn cung cấp nhiều customize options. Đây là một lựa chọn tốt nếu bạn đang xây dựng hệ thống từ đầu. Plugin này cung cấp một tập hợp các validation method hữu ích, bao gồm URL và email validation, trong đó cung cấp API để có thể add thêm customize method. Tất cả các validation method đều đi kèm với error message default bằng tiếng anh và có thể dịch ra 37 ngôn ngữ khác. Plugin is này được biết và maintain bởi Jörn Zaefferer, một thành viên của jQuery team, lead developer của jQuery UI team và maintainer của QUnit. Nó đã được bắt đầu trở lại vào những ngày đầu của jQuery trong năm 2006, được update và improve kể từ đó.

Cơ bản về Jquery Validation

Sau đây là một một ví dụ đơn giản về Jquery Validation, khi ta sử dụng các validation method được cung cấp bởi Jquery Validation. Ta có trang html như sau:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Demo for jQuery validate plugin</title>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
  <script src="demoValidation.js" type="text/javascript"></script>
  <style>
    label.error{
			color: red;
		}
	</style>
</head>

<body>
  <div id="main">
    <form method="get" id="demoForm">
      <p>
        <label>Username</label>
        <input name="user" type="text" />
      </p>
      <p>
        <label>Password</label>
        <input id="password" type="password" name="password" />
      </p>
      <p>
        <label>Re-Password</label>
        <input id="re-password" type="password" name="re-password" />
      </p>
      <p>
        <input type="submit" value="Register" id="register" />
      </p>
    </form>
  </div>
</body>

</html>

Khi đó, trong file "demoValidation.js", bạn không cần phải check js bằng tay nữa. Mà ta sẽ sử dụng cú pháp của jquery validation để validate form. Bạn sẽ thấy viết jquery cho việc validation thật đơn giản và dễ nhìn:

$().ready(function() {
  $("#demoForm").validate({
    onfocusout: false,
    onkeyup: false,
    onclick: false,
    rules: {
      "user": {
        required: true,
        maxlength: 15
      },
      "password": {
        required: true,
        minlength: 8
      },
      "re-password": {
        equalTo: "#password",
        minlength: 8
      }
    }
  });
});

Sau đây là list các rules mặc định có sẵn của Jquery Validation:

required	Bắt buộc input element
remote	Request một resource để check element
minlength	Define độ dài min của một element
maxlength	Define độ dài max của một element
rangelength	Define khoảng độ dài cho một element
min	Define giá trị min cho một element
max	Define giá trị max cho một element
range	Define khoảng giá trị cho moọt element
step	Define số bước nhất định cho một element
email	Validate format cho email
url	Validate format cho url
date	Validate format cho date
number	Validate format cho decimal number
digits	Validate cho một element là số nguyên dương hoặc số 0
equalTo	Yêu cầu một element bằng với gái trị của một element khác

Ngoài ra nếu bạn muốn thay đổi message cho các rules, không dùng message mặc định của jquery validation nữa. Ta sẽ thay đổi file js như sau:

$().ready(function() {
  $("#demoForm").validate({
    onfocusout: false,
    onkeyup: false,
    onclick: false,
    rules: {
      "user": {
        required: true,
        maxlength: 15
      },
      "password": {
        required: true,
        minlength: 8
      },
      "re-password": {
        equalTo: "#password",
        minlength: 8

      }
    },
    messages: {
      "user": {
        required: "Bắt buộc nhập username",
        maxlength: "Hãy nhập tối đa 15 ký tự"
      },
      "password": {
        required: "Bắt buộc nhập password",
        minlength: "Hãy nhập ít nhất 8 ký tự"
      },
      "re-password": {
        equalTo: "Hai password phải giống nhau",
        minlength: "Hãy nhập ít nhất 8 ký tự"
      }
    }
  });
});

Lúc này, ta có thể tùy chỉnh error message theo spec của dự án.

Customize Method

Validate cho một element

Nếu trong các rules kể trên, không có rules nào phù hợp với form validation của bạn. Ta có thể sử dụng customized method. Khi đó ta sẽ tự đặt tên cho rule và addMethod cho form Validation. Ví dụ, ta muốn validate lại format cho password bao gồm chữ hoa, chữ thường và ít nhất một chữ số. Ta đặt tên rule là "validatePassword" và add thêm rule này cho element password như sau:

"password": {
    required: true,
    validatePassword: true,
    minlength: 8
},

Sau đó hay define rule "validatePassword" bằng cách add thêm method cho form validation. Hãy thêm method sau ở ngoài form validate. Lúc này 2 params truyền vào bao gồm value là giá trị password bạn vừa nhập vào và element có giá trị là "#password" tức là id của nó.

$.validator.addMethod("validatePassword", function(value, element) {
  return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/i.test(value);
}, "Hãy nhập password từ 8 đến 16 ký tự bao gồm chữ hoa, chữ thường và ít nhất một chữ số");

Hoàn chỉnh ví dụ trên:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Demo for jQuery validate plugin</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
    <script src="demoValidation.js" type="text/javascript"></script>
    <style>
      label.error{
			color: red;
		}
	    </style>
  </head>

<body>
  <div id="main">
    <form method="get" id="demoForm" action="">
      <p>
        <label>Username</label>
        <input name="user" type="text" />
      </p>
      <p>
        <label>Password</label>
        <input id="password" type="password" name="password" />
      </p>
      <p>
        <label>Re-Password</label>
        <input id="re-password" type="password" name="re-password" />
      </p>
      <p>
        <input type="submit" value="Register" id="register" />
      </p>
    </form>
  </div>
</body>

</html>

$(document).ready(function () {
	$.validator.addMethod("validatePassword", function (value, element) {
		  return false;
	}, "Hãy nhập password từ 8 đến 16 ký tự bao gồm chữ hoa, chữ thường và ít nhất một chữ số");
  $("#demoForm").validate({
    onfocusout: false,
    onkeyup: false,
    onclick: false,
    rules: {
      "user": {
        required: true,
        maxlength: 15
      },
      "password": {
        required: true,
        validatePassword: true,
        minlength: 8
      },
      "re-password": {
        equalTo: "#password",
        minlength: 8

      }
    },
    messages: {
      "user": {
        required: "Bắt buộc nhập username",
        maxlength: "Hãy nhập tối đa 15 ký tự"
      },
      "password": {
        required: "Bắt buộc nhập password",
        minlength: "Hãy nhập ít nhất 8 ký tự"
      },
      "re-password": {
        equalTo: "Hai password phải giống nhau",
        minlength: "Hãy nhập ít nhất 8 ký tự"
      }
    }
  });
});

Validate với một element khác

Trường hợp bạn muốn validate với một giá trị của một element khác. Trong rule "validatePassword" thay vì là true, hãy truyền vào id của element bạn muốn so sánh với nó.

validatePassword: "#re-password",

Lúc này, method được add thêm sẽ bao gồm 3 params, value và element vẫn được giữ nguyên giá trị của nó và một param thứ ba sẽ chứa giá trị id bạn truyền vào. Lưu ý, cách lấy giá trị của element truyền vào sẽ là $(param), giống như cách ta lấy giá trị của một element khi biết id của nó.

$.validator.addMethod("validatePassword", function (value, element, param)

Tổng kết

Hi vọng bài viết này sẽ cung cấp được cho các bạn một Plugin mới khá hữu dụng khi validate trên clientside. Đây là một Plugin khá nhẹ, đơn giản và dễ dùng. Khi tôi sử dụng Jquery Validation, tôi thấy code js trở nên dễ nhìn, dễ đọc và rõ ràng hơn rất nhiều. Cảm ơn bạn đã đọc bài viết này.

PreviousCùng tìm hiểu plugin Jquery Validation NextTìm hiểu về Jquery Validation (Phần 2) (ok)

Last updated 5 years ago

hashtagTổng quan về Jquery Validation

hashtagCơ bản về Jquery Validation

hashtagCustomize Method

hashtagValidate cho một element

hashtagValidate với một element khác

hashtagTổng kết