Javascript JS->；输入的表单验证。使用for循环获取所有输入索引

我有一个有4个输入的表单，我想在提交时显示一个警报。我所做的是，我已经创建了在每个输入下显示的警告：无；在CSS中

在此之后，我在JS中创建了一个for循环，以获取每个输入的索引，并应用if语句显示警报if==null | |===“” 使用变量使

查询选择器（“类”）.style.display=“block”

我的表格上也有这一行


我的问题是，当我提交表单时，唯一显示的警报是用户名下的警报，它出现后也会消失，因为我认为for循环会转到下一个输入

如果还有什么需要澄清的，请告诉我

这里有所有代码：

如果要查看显示JS的警报，请按Run with JS

谢谢大家!
 以下是一个更新的解决方案：

您使用了querySelector，它只返回它在同一类中找到的第一个元素，您应该使用querySelector，它返回所有选择器。
下面是一个更新的解决方案：

您使用了querySelector，它只返回它在同一类中找到的第一个元素，您应该使用querySelector，它返回所有选择器。
我建议对
validare（）
函数进行一些修改：

function validare() {

    var inputs, messages, index;
    var isValid = true;

    inputs = document.getElementsByTagName('input');
    messages = document.getElementsByClassName(' alert alert-danger custom');

    for (index = 0; index < inputs.length; ++index) {
        var currentInputValue = inputs[index].value;
        if (currentInputValue == null || currentInputValue === "") {
            messages[index].style.display = "block";
            isValid = false;
        }
    }

    return isValid;
}

添加一个指示整个表单是否有效的标志，假设它为真，直到找到无效的输入。返回此标志的值

var isValid=true

还可以捕获验证消息，以便您可以像输入一样通过索引访问它们：

messages=document.getElementsByClassName（'alert-alert-danger-custom'）

当发现无效输入时，显示相关消息并将有效标志更新为false

if (currentInputValue == null || currentInputValue === "") {
    messages[index].style.display = "block";
    isValid = false;
}

以下是更新后的函数：

function validare() {

    var inputs, messages, index;
    var isValid = true;

    inputs = document.getElementsByTagName('input');
    messages = document.getElementsByClassName(' alert alert-danger custom');

    for (index = 0; index < inputs.length; ++index) {
        var currentInputValue = inputs[index].value;
        if (currentInputValue == null || currentInputValue === "") {
            messages[index].style.display = "block";
            isValid = false;
        }
    }

    return isValid;
}

函数validare（）{
var输入、消息、索引；
var isValid=true；
输入=document.getElementsByTagName（'input'）；
messages=document.getElementsByClassName（'alert-danger-custom'）；
用于（索引=0；索引

我建议对
validare（）
函数进行一些修改：

function validare() {

    var inputs, messages, index;
    var isValid = true;

    inputs = document.getElementsByTagName('input');
    messages = document.getElementsByClassName(' alert alert-danger custom');

    for (index = 0; index < inputs.length; ++index) {
        var currentInputValue = inputs[index].value;
        if (currentInputValue == null || currentInputValue === "") {
            messages[index].style.display = "block";
            isValid = false;
        }
    }

    return isValid;
}

添加一个指示整个表单是否有效的标志，假设它为真，直到找到无效的输入。返回此标志的值

var isValid=true

还可以捕获验证消息，以便您可以像输入一样通过索引访问它们：

messages=document.getElementsByClassName（'alert-alert-danger-custom'）

当发现无效输入时，显示相关消息并将有效标志更新为false

if (currentInputValue == null || currentInputValue === "") {
    messages[index].style.display = "block";
    isValid = false;
}

以下是更新后的函数：

function validare() {

    var inputs, messages, index;
    var isValid = true;

    inputs = document.getElementsByTagName('input');
    messages = document.getElementsByClassName(' alert alert-danger custom');

    for (index = 0; index < inputs.length; ++index) {
        var currentInputValue = inputs[index].value;
        if (currentInputValue == null || currentInputValue === "") {
            messages[index].style.display = "block";
            isValid = false;
        }
    }

    return isValid;
}

函数validare（）{
var输入、消息、索引；
var isValid=true；
输入=document.getElementsByTagName（'input'）；
messages=document.getElementsByClassName（'alert-danger-custom'）；
用于（索引=0；索引

好的。我已经实现了您的更改，我可以看到这是如何工作的。我还将onsubmit更改为onchange，以保持警报显示。输入有效值后，它们不会消失。好的。我已经实现了您的更改，我可以看到这是如何工作的。我还将onsubmit更改为onchange，以保持警报显示。输入有效值后，它们不会消失。请在此处发布相关代码片段，而不仅仅是作为jsbin.com的链接。请在此处发布相关代码片段，不仅仅是作为jsbin.com的链接。我使用了你的函数版本，并添加了一个小的else来隐藏条件不满足时的警报。我使用了你的函数版本，并添加了一个小的else来隐藏条件不满足时的警报。