Javascript 如何在不循环的情况下显示消息错误？

我需要创建错误消息，当有人模糊了字段时，该消息会显示他的错误。一切都已经开始工作了，但我犯的错误是，每次我想模糊消息时，错误都在重复，因此，如何在不循环此过程的情况下显示错误消息

custom.js

// Show input required error
var input = $(".tab-content input");
input.blur(function ()
{
    if (!$(this).val())
    {
        var attr = $(this).attr('required');
        if (attr == 'required')
        {
            var msg = $(this).attr('placeholder');
            if (msg != undefined)
            {
                $(this).after("<p class='error-message'>" + msg + ' is a required field !' + "</p>");
                console.log("error");
            }
        }
    }
    else
    {
        $(this).siblings("p.error-message").empty();
        $(this).siblings("p.error-message").css("display", "none");
    }
});

//显示所需输入错误
变量输入=$（“.tab内容输入”）；
input.blur（函数（）
{
if（！$（this.val（））
{
var attr=$（this.attr（'required'）；
如果（attr==“必需”）
{
var msg=$（this.attr（'placeholder'）；
如果（消息！=未定义）
{
$（this）.after（“
”+msg+'是必填字段！”+“
”）；
控制台日志（“错误”）；
}
}
}
其他的
{
$（this）.sides（“p.error-message”）.empty（）；
$（this）.sides（“p.error-message”）.css（“display”，“none”）；
}
});

编辑：

register.html

{% extends 'base.html' %}
{% block title %} Register {% endblock %}

{% block body %}
<div class="register">
    <!-- Message Error -->
    {% if messages %}
        <div class="container">
            {% for message in messages %}
                {% if 'rm_account' in message.tags %}
                    <div class="alert alert-success text-success">
                        {{ message }}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    {% endif %}
    <!-- Header -->
    <div class="header text-center">
            <h2>Register New Account</h2>
    </div>
    <!-- Signup -->
    <div class="container sign-in-up">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="wall">
                <br>
                <!-- Nav tabs -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="new">
                        <br>
                            <form method="post">
                            {% csrf_token %}
                                <div class="form-group">
                                    <div class="right-inner-addon">
                                    {% for field in form %}
                                        {% if form.errors %}
                                            {% for error in field.errors %}
                                            <div class="text-danger">
                                                <strong>{{ error }}</strong>
                                            </div>
                                            {% endfor %}
                                        {% endif %}
                                    {{ field }}
                                    {% endfor %}
                                    </div>
                                </div>
                            <hr>
                                <div class="tab-content">
                                    <div class="tab-pane fade in active text-center" id="pp">
                                        <button type="submit" class="btn btn-primary btn-lg btn-block"><i class="fa fa-plus"></i> Create Account</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    {% include 'base_footer.html' %}
{% endblock %}

{%extends'base.html%}
{%block title%}寄存器{%endblock%}
{%block body%}
{%if消息%}
{消息%中的消息为%s}
{%if'rm_account'在message.tags%}
{{message}}
{%endif%}
{%endfor%}
{%endif%}
注册新帐户




{%csrf_令牌%}
{%形式的字段为%}
{%if form.errors%}
{%字段中有错误。错误%}
{{error}}
{%endfor%}
{%endif%}
{{field}}
{%endfor%}

创建帐户
{%include'base_footer.html%}
{%endblock%}

---

您可以检查输入旁边是否已经有错误消息，它是否不可见（即隐藏），您是否在之后使用了

（..

因此，错误将被插入到输入标记之后，具体取决于此限制相同错误消息插入特定输入的次数，或者您只需删除错误消息，而不是使用

$（this）隐藏。下一步（“p.error-message”）.remove（）

演示代码：

//显示所需输入错误
变量输入=$（“.tab内容输入”）；
input.blur（函数（）{
if（！$（this.val（））{
var attr=$（this.attr（'required'）；
如果（attr==“必需”）{
var msg=$（this.attr（'placeholder'）；
如果（消息！=未定义）{
//检查此输入旁边的，即：p标记是否不可见
if（！$（this）.next（“p.error-message”）是（“：visible”）{
$（this）.after（“
”+msg+'是必填字段！”+“
”）；
console.log（“错误”）
}
}
}
}否则{
//隐藏下一个p标记
$（this）.next（“p.error-message”）.empty（）；
$（this）.next（“p.error-message”）.css（“display”，“none”）；
}
})；

注册新帐户








创建帐户

我认为你应该只在错误信息还没有出现的时候才添加它。而且你的if对于第一条来说是一个无用的例外。这就是你的代码的样子

// Show input required error
var input = $(".tab-content input");
input.blur(function() {
    if (!$(this).val())
    {
        // If no text in error message element then add error message.
        if ($(this).siblings("p.error-message").text().length == 0) { 
            $(this).after("<p class='error-message'>" + msg + ' is a required field !' + "</p>");
            console.log("error");
        }
    } else {
        $(this).siblings("p.error-message").empty();
        $(this).siblings("p.error-message").css("display", "none");
    }
});

---

请提供一个。对不起，我不明白“可复制的示例”到底是什么意思。如果您发现任何错误，请注意我，我会修改它。我们也想看到您的HTML，以便我们可以复制此示例以给出正确的解决方案。查看上面的代码没有多大帮助。：）您的if语句有点奇怪。if只能得到一个选项，这总是正确的。您可以设置：var attr=$（this）.attr（'required'）；然后检查它是否确实是“required”在下一个if语句中。由于您在该语句之前设置了required，如果它永远不会是其他任何东西，对吗？我认为您可以删除if和var attr.Same for var msg。此外，我认为您的input.blur会被触发多次，因为用户（在本例中可能是您）单击它和它旁边。如果这就是你所说的循环，那么我想我知道解决方案。@AlwaysHelping我认为这是足够的代码，但不是一个解释得很好的问题。正如你现在在编辑中看到的，在实际复制之前，你需要安装一些额外的东西。

// If
!$(this).next("p.error-message").is(':visible')

// instead of my if:
$(this).siblings("p.error-message").text().length == 0