html输入框验证并提示,jQuery INPUT输入框验证

$(function() {

var c = new ValidateCompent("#test");

});

/**

* 验证输入框

* @param {Object} input

*/

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 = $('

');

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", -parseInt($(input).css("height")) + 25 + "px");

$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 reg = 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 = $('

');

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();

}