日期:2014-05-16  浏览次数:20374 次

表单的js验证框架,只提供提示信息及正则表达式即可自动验证及提示

由于表单验证比较麻烦,所以写个jquery框架进行表单的自动验证及提示,以减少工作量:

1.jquery框架源码:

/*!
 * jquery.ckFormValidate-1.0 
 * 
 * Author: lifeng
 * Date: 2013-9-10 16:50:00
 */

;
(function($) {
	$.fn.validateForm = function(validateRules, functions) {
		var el = this;
		$(validateRules).each(function(i, item) {
			var e = el.find("#" + item.id);
			var $span_2 = $("<span>").addClass("prompt").html(item.preMsg);
			e.after($span_2);

			var $span_1 = $("<span>").addClass("mark");
			e.after($span_1);

			// 注册验证相关的事件,keyup(自动根据正则去验证)
			if (item.regex) {
				e.bind("keyup", function(event) {
					if (event.which == 9)
						return false;
					var result = validate(e, item.regex);
					error(e, result,item.msg);
					return false;
				});
			}

			// 无法通过正则表达式验证
			if (item.fun) {
				e.bind("keyup", function(event) {
					if (event.which == 9)
						return false;
					var result = item.fun();
					error(e, result,item.msg);
					return false;
				});
			}

		});

		// 注册提交按钮事件
		el.bind("submit", function() {
			var isvalid = true;
			$(validateRules).each(function(i, item) {
				var e = el.find("#" + item.id);
				if (item.regex) {
					var result = validate(e, item.regex);
					error(e, result,item.msg);
					isvalid = isvalid & result;
				}

				// 无法通过正则表达式验证
				if (item.fun) {
					var result = item.fun();
					error(e, result,item.msg);
					isvalid = isvalid & result;
				}

			});
			return isvalid ? true : false;
		});
	};

	function validate($obj, reg) {
		var val = $obj.val();
		// 进行正则表达式验证
		var regex = new RegExp(reg);
		return regex.test(val);
	}

	function error($obj, result,msg) {
		if (!result) {
			$obj.addClass("error");
			$obj.nextAll("span.prompt").css({
				"color" : "#ff0000"
			}).html(msg);
		} else {
			$obj.removeClass("error");
			$obj.nextAll("span.prompt").css({
				"color" : "none"
			}).html("<img src='../img/ok_ico.png'/>");
		}
	}
})(jQuery);
2.js书写格式:

//验证规则:
var validateRules=[
	{"id":"username","regex":"^[a-z]{4,20}$","msg":"用户名只能是a-z当中的字符,至少4位"},
	{"id":"userpass","regex":"^[a-zA-Z0-9]{4,20}$","msg":"密码只能是英文或数字,至少4位"},
	{"id":"repassword","msg":"两次密码不一致","fun":validateRepassword},
	{"id":"tel","regex":"(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\([0-9]{3}\))|([0-9]{3}\-))?(1[358][0-9]{9})$)","msg":"请输入正确的联系电话!座机格式:0931-8440845"}
];

//无法通过正则表达式验证的逻辑判断,需要单独提供一个js判断方法,这个方法需要传入在验证规则
//该方法要求返回值必须是true,false;
function validateRepassword(){
	if($("#repassword").val()=="") return false;
	if($("#repassword").val()!=$("#userpass").val()) return false;
	return true;
}
			
$(function(){
	$("#loginForm").validateForm(validateRules);
});

其中id为文本框ID,regex为验证文本框的正则表达式,msg为输入错误时的提示信息;

如果需要特殊验证,使用fun,参数为调用的方法;

3.页面导入:

<script src="${pageContext.request.contextPath }/js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/js/jquery.ckFormValidate-1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/admin/user/js/user.js" type="text/javascript" charset="utf-8"></script>

4.页面表单:

<form id="log