表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/peter_666/article/details/7701292

1. 框架部分


function SigmaxHelper() {
	this.errlist = null;
}

SigmaxHelper.prototype.renderErrDiv = function(validator) {
	this.errlist = [];

	this.validate(validator);
	if(this.errlist.length > 0) {
		$("#errdiv").show();
		$("#errlist").children().remove();
		var msg="";
		for(var i = 0; i < this.errlist.length; i++) {
			msg = msg + "<li>"+ this.errlist[i] +"</li>"
		}
		$("#errlist").html(msg);
		return false;
	} else {
		this.errclear();
		return true;
	}
};

SigmaxHelper.prototype.validator = {
		rules:{},
		messages:{},
};


SigmaxHelper.prototype.elementvalue = function(elementid) {
	var element = $("#" + elementid);
	return $.trim(element.val());
};


SigmaxHelper.prototype.validation = {

		required: function(elementid, param) {
			if(param) {
				var value = this.elementvalue(elementid);
				return value || false;
			} else {
				return true;
			}
		},

		minlength: function(elementid,param) {
			var value = this.elementvalue(elementid);
			return value.length >= param;
		},

		
		maxlength: function(elementid, param) {
			var value = this.elementvalue(elementid);
			return value.length <= param;
		},

		
		rangelength: function(elementid, param) {
			var value = this.elementvalue(elementid);
			return value.length >= param[0] && value.length <= param[1];
		},

		
		min: function(elementid, param) {
			var value = this.elementvalue(elementid)-0;
			return value >= param;
		},

		
		max: function(elementid, param) {
			var value = this.elementvalue(elementid) - 0;
			return value <= param;
		},

		
		range: function(elementid,param) {
			var value = this.elementvalue(elementid) - 0;
			return value >= param[0] && value <= param[1];
		},

		
		email: function(elementid, param) {
			var value = this.elementvalue(elementid);
			if(param && value) {
				return  /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
			} else {
				return true;
			}
		},

		// URLフォーマット
		url: function(elementid, param) {
			var value = this.elementvalue(elementid);
			if(param && value){
				return  /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
			} else {
				return true;
			}
		},

		
		date: function(elementid, param) {
			var value = this.elementvalue(elementid);
			if(param && value){
				return  !/Invalid|NaN/.test(new Date(value));
			} else {
				return true;
			}
		},

		
		dateISO: function(elementid, param) {
			var value = this.elementvalue(elementid);
			if(param && value) {
				return /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
			} else {
				return true;
			}
		},

		
		integer: function(elementid, param) {
			var value = this.elementvalue(elementid);
			if(param && value) {
				return /^[-]?[0-9]*$/.test(value);
			} else {
				return true;
			}
		},

		
		digits: function(elementid, param) {
			var value = this.elementvalue(elementid);
			if(param && value) {
				return /^\d+$/.test(value);
			} else {
				return true;
			}
		},

		
		floats: function(elementid, param) {
			var value = this.elementvalue(elementid);
			if(param && value) {
				return /^\d+\.\d+$/.test(value);
			} else {
				return true;
			}
		},

		
		equalTo: function(elementid, param) {
			var value = this.elementvalue(elementid);
			if(!value) return true;
			var value2 = this.elementvalue(param);
			return value == value2;
		},
};


SigmaxHelper.prototype.validate = function(validator){
	for(var element in validator.rules){
		for(var rule in validator.rules[element]){
			var rulename  = rule;
			var rulevalue = validator.rules[element][rule];
			var method = this.validation[rule];
			if(!method.call(this,element,rulevalue)){
				var message   = validator.messages[element][rule];
				this.errlist.push(message);
				break;
			}
		}
	}
};


SigmaxHelper.prototype.errclear = function()
{
	$("#errdiv").hide();
	$("#errlist").children().remove();
};


SigmaxHelper.prototype.submit = function(selector, config)
{
	$(selector).attr('method', 'POST');
	if(config && config.action) {
		$(selector).attr('action', config.action);
	}

	if(config && config.isUpload) {
		$(selector).attr('enctype', 'multipart/form-data');
	}

	validator = this.validator;
	if(config && config.validator) {
		validator = config.validator;
	} else if(config && config.validator === false) {
		validator = {};
	}

	if(this.renderErrDiv(validator)) {
		if(config && config.params) {
			var html = "";
			for(var p in config.params) {
				if(typeof(config.params[p]) != "function") {
					html = html + "<input type='hidden' name='"+p+"' value='"+config.params[p]+"'/>"
				}
			}
			$(selector).append(html);
		}
		return $(selector).submit();
	} else {
		return false;
	}
};

2. 自定义部分


var newUser = newUser || new SigmaxHelper();
var helper = newUser;

(function(helper){
// *************************************************************************************
	$(function(){
		
		$("#btnOk").click(function(){
			if(confirm(getText('MSG_USERMNG_009'))){
				helper.submit("#form1");
			}
		});

		$("#btnCancel").click(function(){
			helper.errclear();
			$("#userid,#password1,#password2,#birthday,#resume").val('');
			$("#role2").attr('checked','checked');
		})

		$("#btnUserList").click(function(){
			var url = $("#urlUserList").val();
			window.location.href = url;
		})

		var date = $("#birthday").val();
		$("#birthday").datepicker();
		$("#birthday").datepicker('option', {dateFormat: 'yy-mm-dd'});
		$('#birthday').datepicker('option', {dayNamesMin: ['日', '月', '火', '水', '木', '金', '土']});

		if(date){
			$("#birthday").datepicker('setDate',new Date(date));
		}

		$("#btnUpload").click(function(){
			helper.submit("#form1",
				{
					action:$("#urlUploadImg").val(),
					validator:{},
					isUpload:true,
				});
		})

		
		helper.validator = {
			rules:{
				no:{
					required:true,
					maxlength:50
				},
				name:{
					required:true,
					maxlength:50,
				},
				productor:{
					required:true,
					maxlength:60,
					minlength:6
				},
				brand:{
					required:true,
					maxlength:60,
					minlength:6,
					equalTo:"password1"
				},
				rebate:{
					date:true
				},
				price:{
					maxlength:120,
					email:true
				}
			},
			messages:{
				userid:{
					required:getText('MSG_USERMNG_005'),
					maxlength:getText('MSG_USERMNG_011',getText('UI_USERID'),'50'),
				},
				username:{
					required:getText('MSG_USERMNG_015'),
					maxlength:getText('MSG_USERMNG_011',getText('UI_DISPLAYNAME'),'50'),
				},
				password1:{
					required:getText('MSG_USERMNG_006'),
					maxlength:getText('MSG_USERMNG_011',getText('UI_PASSWORD'),'60'),
					minlength:getText('MSG_USERMNG_012',getText('UI_PASSWORD'),'6'),
				},
				password2:{
					required:getText('MSG_USERMNG_014'),
					maxlength:getText('MSG_USERMNG_011',getText('UI_PASSWORD_CONFIRM'),'60'),
					minlength:getText('MSG_USERMNG_012',getText('UI_PASSWORD_CONFIRM'),'6'),
					equalTo:getText('MSG_USERMNG_007'),
				},
				birthday:{
					date:getText('MSG_USERMNG_010',getText('UI_BIRTHDAY')),
				},
				email:{
					email:getText('MSG_USERMNG_010',getText('UI_EMAIL')),
					maxlength:getText('MSG_USERMNG_011',getText('UI_EMAIL'),'120'),
				},
				resume:{
					maxlength:getText('MSG_USERMNG_011',getText('UI_SELF_DESCRIPTION'),'1024'),
				},
			}
		};
	})

}(helper));

自定义Jquery验证