Jquery validate 范例

2019独角兽企业重金招聘Python工程师标准>>>

#方法扩展

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"
});

转载于:https://my.oschina.net/u/1156053/blog/200460