JQuery验证框Input简单、粗暴

Html

Css

//=================使用方法===================开始
$(function() {
	var c = new ValidateCompent("#test");
	var b = new ValidateCompent("#cc");
	var d = new ValidateCompent("#mu");
	var a = new ValidateCompent("#as");
	$("#test").click(function() {
		console.log(c.validate);
	});
});
//================使用方法====================结束

/**
 * 以str字符串开头
 * @param {Object} str 开头字符串
 */
String.prototype.startWith = function(str) {
	var reg = new RegExp("^" + str);
	return reg.test(this);
}
/**
 * 以str字符串结尾
 * @param {Object} str 结尾字符串
 */
String.prototype.endWith = function(str) {
	var reg = new RegExp(str + "$");
	return reg.test(this);
}

function ValidateCompent(input) {
	var _input = $(input).clone(true);
	_input.css("height", $(input).css("height"));
	_input.css("width", $(input).css("width"));
	var border = _input.css("border");
	this.successIconClass = "icon-tick";
	this.validate = false;
	this.faileIconClass = "icon-times";

var $validateRoot = $('<div class="validate-v1-container"><div class="validate-v1-tooltip"></div></div>');
	var $tooltip = $validateRoot.children(".validate-v1-tooltip");
	var $input = _input;
	if($input != undefined) {
		var maxWidth = $input.css("width");
		var maxHeight = "15px";
		$validateRoot.css("display", "inline");
		$validateRoot.css("position", "relative");
		$validateRoot.css("width", maxWidth);
		$validateRoot.css("height", maxHeight);
		$tooltip.css("width", maxWidth);
		$tooltip.css("padding", "0px 5px");
		$tooltip.css("position", "absolute");
		$tooltip.css("top", "0px");
		$tooltip.css("z-index", "999999");
		$tooltip.css("background-color", "white");
		$tooltip.css("border", "solid 1px rgb(188,188,188)");
		$tooltip.css("left", parseInt(maxWidth) + 10 + "px");
		$tooltip.hide();
		var validateOption = $input.attr("data-vali-option");

if(validateOption != undefined) {
			validateOption = JSON.parse(validateOption);
			var that = this;
			var regvali = new Array();
			$tooltip.hide();
			if(validateOption.length == 0) {
				return;
			}
			for(var i = 0; i < validateOption.length; i++) {
				var message = validateOption[i].message;
				var pattern = validateOption[i].pattern;
				var params = validateOption[i].params;
				message = message === undefined ? "@" + pattern : message;
				pattern = pattern === undefined ? "" : pattern;
				params = params === undefined ? "" : params;
				if(message.startWith("@")) {
					var valiObj = validateMap[pattern.split("@")[1]];
					var cmessage = null
					if(typeof valiObj === "function") {
						var array = JSON.parse(params);
						cmessage = valiObj(array).message;
					} else {
						cmessage = valiObj.message;
					}
					message = cmessage == undefined ? message : cmessage;
				}
				if(pattern.startWith("@")) {
					var valiObj = validateMap[pattern.split("@")[1]];
					var cpattern = null
					if(typeof valiObj === "function") {
						var array = JSON.parse(params);
						cpattern = valiObj(array).pattern;
					} else {
						cpattern = valiObj.pattern;
					}
					pattern = cpattern == undefined ? pattern : cpattern;
				}
				var reg = pattern instanceof RegExp ? pattern : new RegExp(pattern);
				var messageView = new ValidateMessage(message, that.faileIconClass);
				regvali.push({
					"reg": reg,
					"view": messageView
				});
				$tooltip.append(messageView.dom);
			}
			$tooltip.css("height", (parseInt(maxHeight) + 15) * validateOption.length);
			$input.on("focus propertychange input", function(e) {
				$tooltip.show();
				for(var i = 0; i < regvali.length; i++) {
					if(regvali[i].reg.test($input.val())) {
						regvali[i].view.setIconClass(that.successIconClass);
						regvali[i].view.dom.css("color", "green");
					} else {
						regvali[i].view.setIconClass(that.faileIconClass);
						regvali[i].view.dom.css("color", "red");
					}
				}
			})

$input.on("blur", function(e) {
				for(var i = 0; i < regvali.length; i++) {
					if(regvali[i].reg.test($input.val())) {
						regvali[i].view.setIconClass(that.successIconClass);
						$input.css("border", border == undefined ? "border 1px solid rgb(188,188,188)" : border);
						that.validate = true;
					} else {
						regvali[i].view.setIconClass(that.faileIconClass);
						$input.css("border", "1px solid red");
						that.validate = false;
						break;
					}
				}
				$tooltip.hide();
			});
			$validateRoot.append($input);
		} else {
			return;
		}
	}

this.dom = function() {
		return $validateRoot;
	}

function ValidateMessage(message, iconFontClass) {
		var dom = $('<div class="validate-message"><span class="vticon"></span><span class="vmessage"></span></div>');
		var $icon = dom.children(".vticon");
		var $message = dom.children(".vmessage");
		$message.css("line-height", "28px");
		$message.css("padding", "5px 5px");
		$message.css("padding-right", "10px");
		$message.css("word-break", "break-all");
		$message.css("word-wrap", "break-word");
		$message.css("font-size", "14px");
		$message.css("position", "relative");
		$message.css("z-index", "999999");

this.setIconClass = function(iconClass) {
			$icon.removeClass();
			$icon.addClass("vticon");
			$icon.addClass(iconClass);
		}

this.getIcon = function() {
			return $icon;
		}

this.setMessageText = function(_message) {
			$message.html(_message);
		}

this.getMessageText = function() {
			return $message;
		}

this.setIconClass(iconFontClass);
		this.setMessageText(message);
		this.dom = dom;
	}
	$validateRoot.insertAfter($(input));
	$(input).remove();
}

//==================扩展区=================开始
var validateMap = {};
(function() {

validateMap["money"] = {
		"pattern": /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
		"message": "请输入正确的金额有误。"
	};

validateMap["realNum"] = {
		"pattern": "^[0-9]+(.[0-9]{1,3})?$",
		"message": "请输入正确的值。"
	}

validateMap["min"] = function(args) {
		var num = args[0];
		var reg = new RegExp("^([\\s\\S]+){" + num + ",}$");
		return {
			"pattern": reg,
			"message": "至少输入" + num + "个字符。"
		};
	}

})();
//==================扩展区=================结束

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

JQuery验证框Input简单、粗暴



代码描述：JQuery 验证框Input，在之前的基础上做了一些优化，支持自定义扩展验证函数

1

最新

发表评论全部评论

暂时没有评论！

饭吃了没。0

2017/8/31 9:14:21

@表示引用预定义模板。@money，实际上是引用扩展validateMap["money"]这个对象，如果不输入message，则用validateMap["money"].message作为消息提示、如果HTML中data-vali-option中有定义message，则HTML中定义的message 优先级比预定义高。
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

饭吃了没。

相关代码

JQuery验证框Input简单、粗暴

最新