Jquery validate 範例

#方法擴展

jQuery.validator.addMethod("username",
	function(value, element) {
		return this.optional(element)
			|| /^[\u0391-\uFFE5\w]+$/.test(value);
			}, "只能包括中文字、英文字母、數字和下劃線");

#驗證示例

$("#reportLogForm").validate(
	{
		onfocusout : function(element, event) {
			if ($(element).rules()) {
				this.element(element);
			}
		},
		groups : {
			time : "dateFrom dateTo"
		},
                // 樣式自定義
		errorPlacement : function(error, element) {
			if (element.attr("name") == "dateFrom"
					|| element.attr("name") == "dateTo") {
				error.insertAfter("#time-region");
			} else if (element.attr("name") == "dataType") {
				error.appendTo("#dataTypeMessage");
			} else {
				error.insertAfter(element);
			}
		},
                // 忽略驗證
		ignore : 'input[type=hidden]',
		rules : {
			title : {
				required : true,
				rangelength : [ 5, 20 ]
			},			
			type : {
				required : true
			},
			user : {
				username : true
			},			
		},
                // 消息提示
		messages : {
			title : {
				required : "請填寫報表標題"
			},
			type : {
				required : "請選擇報表格式"
			}
		}
	});

#動態驗證

動態添加

function addDateValidate(){
	$("#dateFrom").rules("add", {
		required : true,
		messages : {
			required : "開始時間 和  結束時間 不能爲空"
		}
	});
	$("#dateTo").rules("add", {
		required : true,
		messages : {
			required : "開始時間 和  結束時間 不能爲空"
		}
	});
}

動態刪除

function removeDateValidate(){
	$("#dateFrom").rules("remove", "required");
	$("#dateTo").rules("remove", "required");
}

// 默認設定  對於項目自己作全局設置

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});