jQuery Validation Plugin – Dễ dàng thực hiện kiểm tra biểu mẫu
jQuery Validation Plugin cung cấp tích hợp kiểm tra cho biểu mẫu hiện có của bạn, đồng thời giúp bạn dễ dàng thực hiện các tùy chỉnh để phù hợp với ứng dụng của bạn.
Bắt đầu
Tải các tệp đã được xây dựng trước
Các tệp đã được xây dựng trước có thể được tải xuống tại https://jqueryvalidation.org/
Tải các thay đổi mới nhất
Các tệp phát triển chưa được phát hành có thể được lấy bằng cách:
. Downloading hoặc sao chép kho này
. Cài đặt quy trình xây dựng
. Chạy grunt để tạo các tệp đã xây dựng trong thư mục “dist”
Bao gồm nó trên trang của bạn
Bao gồm jQuery và plugin trên một trang. Sau đó, chọn biểu mẫu cần kiểm tra và gọi phương thức validate.
<form>
<input required>
</form>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$("form").validate();
</script>
Hoặc bao gồm jQuery và plugin thông qua requirejs trong mô-đun của bạn.
define(["jquery", "jquery.validate"], function( $ ) {
$("form").validate();
});
Để biết thêm thông tin về cách thiết lập các quy tắc và tùy chỉnh, hãy xem tại check the documentation.
Báo cáo sự cố và đóng góp mã
Xem Hướng dẫn đóng góp để biết chi tiết.
LƯU Ý QUAN TRỌNG VỀ KIỂM TRA EMAIL. Từ phiên bản 1.12.0, plugin này sử dụng cùng biểu thức chính quy với HTML5 specification suggests for browsers to use. Chúng tôi sẽ tuân theo hướng dẫn của họ và sử dụng cùng kiểm tra. Nếu bạn nghĩ rằng quy định sai, vui lòng báo cáo sự cố cho họ. Nếu bạn có yêu cầu khác, xem xét using a custom method. Trong trường hợp bạn cần điều chỉnh các mẫu biểu thức chính quy kiểm tra tích hợp sẵn, vui lòng follow the documentation.
LƯU Ý QUAN TRỌNG VỀ PHƯƠNG THỨC CẦN THIẾT. Từ phiên bản 1.14.0, plugin này ngừng loại bỏ khoảng trắng từ giá trị của phần tử đã được kết nối. Nếu bạn muốn đạt được kết quả tương tự, bạn có thể sử dụng normalizer có thể được sử dụng để biến đổi giá trị của một phần tử trước khi kiểm tra. Tính năng này đã có sẵn từ v1.15.0. Nói cách khác, bạn có thể thực hiện một cái gì đó như sau:
$("#myForm").validate({
rules: {
username: {
required: true,
// Using the normalizer to trim the value of the element
// before validating it.
//
// The value of `this` inside the `normalizer` is the corresponding
// DOMElement. In this example, `this` references the `username` element.
normalizer: function(value) {
return $.trim(value);
}
}
}
});
Tiện ích truy cập
Đối với trường không hợp lệ, đầu ra mặc định của jQuery Validation Plugin là thông báo lỗi trong một phần tử <label>. Điều này dẫn đến hai phần tử <label> trỏ đến một trường nhập dùng thuộc tính for. Mặc dù đây là HTML hợp lệ, nhưng có sự hỗ trợ không đồng nhất trên các phần mềm đọc màn hình.
Để có sự hỗ trợ tốt hơn cho phần mềm đọc màn hình trong việc kiểm tra biểu mẫu của bạn, hãy sử dụng tham số errorElement trong phương thức validate(). Tùy chọn này xuất thông báo lỗi trong một phần tử mà bạn chọn và tự động thêm các thuộc tính ARIA vào HTML giúp hỗ trợ phần mềm đọc màn hình.
aria-describedby được thêm vào trường nhập và nó được liên kết với phần tử lỗi được chọn trong tham số errorElement.
$("#myform").validate({
errorElement: "span"
});
<label for="name">Name</label>
<input id="name" aria-describedby="unique-id-here">
<span class="error" id="unique-id-here">This field is required</span>
Chi tiết Tải về:
Tác giả: jquery-validation
Mã nguồn: https://github.com/jquery-validation/jquery-validation
Giấy phép: MIT license
