javascript - jquery / Regex，停止事件冒泡

Question

我有一个使用 jquery /regex 的表单验证：

$(document).ready(function () {
    $('.keyup-numeric').keyup(function () {
        $('span.error-keyup-1').hide();
        var inputVal = $(this).val();
        var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
        if (!numericReg.test(inputVal)) {
            $(this).after('<span class="tiny warning_bubble">Numeric characters only.</span>');
        }

    });
});

如何阻止warning_bubble跨度堆积？小提琴： http: //jsfiddle.net/M2Ns5/ 谢谢，

Answer 1

检查下一个元素是否具有warning_bubble类，然后将其添加到跨度。

$(document).ready(function () {
    $('.keyup-numeric').keyup(function () {
        $('span.error-keyup-1').hide();
        var inputVal = $(this).val();
        var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
        if (!numericReg.test(inputVal)) {
            if (!$(this).next().hasClass('warning_bubble')) {
                $(this).after('<span class="tiny warning_bubble">Numeric characters only.</span>');
            }
        } else {
            $(this).parent().find(".warning_bubble").hide();
        }
    });
});

jsFiddleDemo 在这里

Answer 2

对代码的最少更改是在输入之后在标签内添加一个容器：

<span class="warning-container"></span>    

并将您的后行更改为空/附加：

$(this).siblings('.warning-container').empty().append('<span class="tiny warning_bubble">Numeric characters only.</span>');

---

注意： empty().append()是一种更快的方法html()。另请注意，虽然这是对原始代码的最少更改，但有很多方法可以使其更高效、更健壮。

Answer 3

http://jsfiddle.net/MrPolywhirl/PkPU9/

$(document).ready(function () {
    (function(tel) {
        // Validation expression
        var numericReg = /^\d*\d(|.\d*\d|,\d*\d)?$/;
        // Create bubble
        var bubble = $('<span class="tiny warning_bubble" style="display:none">Numeric characters only.</span>');
        $(tel).after(bubble); // Add and hide bubble to the input
       // Add key listener to the text input
        $(tel).keyup(function () {
            var inputVal = $(this).val();
            // Toggle the bubble using jquery show/hide
            bubble[inputVal && !numericReg.test(inputVal) ? 'show' : 'hide']();
        });
    })('.keyup-numeric');
});

Answer 4

您可以使用 html 的其余部分创建警告，并将其样式设置为最初隐藏，然后仅显示，或在需要时隐藏警告

HTML

<label>Phone Number:
   <input type="tel" class="keyup-numeric" placeholder="(XXX) XXX-XXXX"/>
   <span class="tiny warning_bubble">Numeric characters only.</span>
</label>

CSS

.warning_bubble {
     color:#d2232a;
     -webkit-border-radius: 12px; 
    border-radius: 12px;
    background-color:#ffdd97;
    padding:5px;
    width:100%;
    display:none;
}

JS

$(document).ready(function () {
    $('.keyup-numeric').keyup(function () {
        $('span.error-keyup-1').hide();
        var inputVal = $(this).val();
        var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
        if (!numericReg.test(inputVal)) {
            $(this).parent().find(".warning_bubble").show();
        } else {
            $(this).parent().find(".warning_bubble").hide();
        }

    });
});

JSFiddle Demo