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" 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> 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:
| Rule | Ý nghĩa |
|---|---|
| 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 |
| 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ố");
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.