javascript - JS->对输入进行表单验证。使用for循环获取所有输入索引

Question

我有一个包含 4 个输入的表单，我想在提交时显示警报。我所做的是，我已经创建了在每个输入下显示的警告:display:none;在CSS中。

之后，我在 JS 中创建了一个 for 循环来获取每个输入的索引，并应用我的 if 语句来显示警报 if === null || ===“” 使用变量来生成 querySelector("THE CLASS").style.display="block";

我的表格上也有这一行

<form method="post" class="q-form" name="form" onsubmit="return validate()">

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

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

这里有所有代码:https://jsbin.com/kazopahuga/1/edit?html,js,output

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

谢谢!

Answer 1

我建议对您的 validare() 函数进行一些修改:

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

var isValid = true;

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

messages = document.getElementsByClassName('警报警报-危险自定义');

当您发现无效输入时，显示相关消息并将有效标志更新为 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;
}

Updated jsbin here