带ToolTip验证框JS组件

最新推荐文章于 2023-04-17 15:30:57 发布

原创最新推荐文章于 2023-04-17 15:30:57 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #javascript面向对象编程实践

JS技术专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于JQuery的输入框验证插件，该插件能够实现对输入内容的实时验证，并通过图标提示验证结果。支持自定义验证规则及样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本组件依赖JQuery
本人测试的JQuery 是1.8，
兼容IE8,IE9，谷歌，火狐等。

/**
 * 验证输入框
 * @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 = $input.css("height");
        $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 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();
}

以下是HTML代码

<input id="test" data-vali-option='[{"pattern":"[1-9]+","message":"只能输入1-9的数"},{"pattern":"[a-z]+","message":"只能输入a-z的数"}]' />

使用方法如下

$(function(){
    var c = new ValidateCompent("#test");
});

获取验证结果

$(function(){
    var c = new ValidateCompent("#test");

    $("#test").click(function(){
        console.log(c.validate);
    });
});

自定义显示方案

$(function(){
    var c = new ValidateCompent("#test");

    $("#test").click(function(){
        console.log(c.validate);
    });

    c.dom().addClass("你的样式类");
});

设置图标字体样式

$(function(){
    var c = new ValidateCompent("#test");

    $("#test").click(function(){
        console.log(c.validate);
    });

    c.successIconClass = "";//成功时的样式
    c.faileIconClass = "";//失败时的样式
});