Xem bài viết jQuery Validate - plugin kiểm tra dữ liệu nhập trên Form

jQuery Validate - plugin kiểm tra dữ liệu nhập trên Form

Jul 28, 2012Jquery / Javascript
Đầu tiên thì mình cần include các file cần thiết cho bài học này.
1. style.css : file này dùng để định dạng cho toàn trang.
2. jquery-1.7.2.min.js : thư viện jquery .
3. jquery.validate.min.js : plugin validate của jquery.
4. messages_vi.js : file này dùng để hiển thị các thông báo lỗi cho các field nhập.
	<link type="text/css" href="style.css" rel="stylesheet">
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="jquery.validate.min.js"></script>
	<script type="text/javascript" src="localization/messages_vi.js"></script>

I. CÁC THÀNH PHẦN ĐƯỢC HỔ TRỢ JQUERY VALIDATE

Sau đây là cách kiểm tra 1 số field thường gặp mà được plugin validate hỗ trợ:

1. Yêu cầu người dùng nhập 1 field nào đó : thì bạn thêm class="required".

2. Kiểm tra việc nhập lại password.

Kiểm tra việc nhập lại password ta viết phần script như sau, với #contact là id của form cần validate.
	$(document).ready(function(){
			$("#contact").validate({
				errorElement: "span", // Định dạng cho thẻ HTML hiện thông báo lỗi
				rules: {
					cpassword: {
						equalTo: "#password" // So sánh trường cpassword với trường có id là password
					}
				}
			});
		});
		

3. Kiểm tra email : thì bạn thêm class="required email".(kiểm tra nhập và phải đúng định dạng email)

4. Kiểm tra dữ liệu là số như điện thoại v.v.. : thì bạn thêm class="number" hoặc class="digits".

5. Kiểm tra chiều dài ký tự : thì bạn dùng minlength="6" hoặc maxlength="12" .

6. Kiểm tra địa chỉ Website : thì bạn thêm class="url".

7. Kiểm tra phần mở rộng của file, mỗi cái cách nhau bằng dấu | : thì bạn thêm accept="đuôi-đin-dạng".

Sau khi đã thiết kế và thêm các class validate của plugin jquery xong thì mình chỉ cần gọi phương thức validate ra để dùng. Với #contact là id của form cần validate.
	$(document).ready(function(){
			$("#contact").validate({
				errorElement: "span", // Định dạng cho thẻ HTML hiện thông báo lỗi
			});
		});
		

II. KIỂM TRA CÁC THÀNH PHẦN THÔNG QUA NAME

Và đây là 1 vài field không được hỗ trợ bởi plugin validate :

8. Kiểm tra giá trị min.

9. Kiểm tra giá trị max.

10. Kiểm tra giá trị trong 1 khoảng nào đó.

11. Kiểm tra chiều dài giá trị trong 1 khoảng nào đó.

Chúng được validate thông qua name trong các field input, với #contact là id của form cần validate. Phần script cho các thành phần không hỗ trợ plugin validate như sau:
	$(document).ready(function(){
			$("#contact").validate({
				errorElement: "span", // Định dạng cho thẻ HTML hiện thông báo lỗi
				rules: {
					min_field: { min: 5 }, //Giá trị tối thiểu
					max_field: { max : 10 }, //Giá trị tối đa
					range_field: { range: [4,10] }, //Giá trị trong khoảng từ 4 - 10
					rangelength_field: { rangelength: [4,10] } //Chiều dài chuỗi trong khoảng từ 4 - 10 ký tự
				}
			});
		});
		

III.TỔNG HỢP

1. Phần HTML

Phần HTML tổng hợp cho tất cả các phần trên như sau:

2. Phần JAVASCRIPT

Phần script tổng hợp cho tất cả các phần trên như sau:
	$(document).ready(function(){
		$("#contact").validate({
				errorElement: "span", // Định dạng cho thẻ HTML hiện thông báo lỗi
				rules: {
					cpassword: {
						equalTo: "#password" // So sánh trường cpassword với trường có id là password
					},
					min_field: { min: 5 }, //Giá trị tối thiểu
					max_field: { max : 10 }, //Giá trị tối đa
					range_field: { range: [4,10] }, //Giá trị trong khoảng từ 4 - 10
					rangelength_field: { rangelength: [4,10] } //Chiều dài chuỗi trong khoảng từ 4 - 10 ký tự
				}
			});
	});
	
Và đây là kết quả khi validate cho form:
jQuery Validate - plugin kiểm tra dữ liệu nhập trên Form - 2Cwebvn
Download jQuery validation pack tại đây: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Tìm hiểu thêm về jQuery validation tại đây: http://docs.jquery.com/Plugins/Validation

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments