jQuery INPUT输入框验证

Html

Css

$(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 = $('<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", -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 = $('<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();
}

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

立即下载

jQuery INPUT输入框验证



代码描述：用于验证TextAreaINPUT框

1

最新

发表评论全部评论

暂时没有评论！

饭吃了没。0

2017/8/23 17:06:50

<input id="test" data-vali-option='[{"pattern":"[1-9]+","message":"只能输入1-9的数"},{"pattern":"[a-z]+","message":"只能输入a-z的数"}]' />
上方HTML正常显示的代码
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

饭吃了没。

相关代码

jQuery INPUT输入框验证

最新