对动态输入进行 Javascript 验证并将输入与某些逻辑相结合

Question

在一个表单（名为 createform）中，许多输入是通过单击添加按钮动态创建的（从 0 到每种输入的任意数字）。 我遇到的问题是验证动态创建的输入，因为它背后有一个复杂的逻辑。

情景

我可以有几个不同的输入：

• 品牌
• 型号
• 国家
• 地区

其中第一个称为brand1，model1，country1和region1，然后添加其他它们将被称为例如brand2...brand50

在初始场景中，只有品牌 1 和型号 1。国家和地区输入仅通过单击按钮添加。

验证条件

我只需要在两种情况下提交表单：

1. 如果有至少一个品牌+一个型号且两者都不为空（任意品牌任意型号，所以也可以是brand5和model12）
2. 如果有至少一个品牌+国家+地区不为空（全部不为空，同上逻辑）

如果我假设我只有第一个品牌、型号、国家和地区（所以品牌 1、型号 1、国家 1 和地区 1），我做了以下验证功能。

代码

function validateForm() {
    var brand = document.forms["createform"]["brand1"].value;
    var model = document.forms["createform"]["model1"].value;
    if (document.forms["createform"]["country1"] === undefined) {
        var country = "";
    } else {
        var country = document.forms["createform"]["country1"].value;
    }
    if (document.forms["createform"]["country1"] === undefined) {
        var region = "";
    } else {
        var region = document.forms["createform"]["region1"].value;
    }
    if ((brand != "") && (model != "")) {
        alert("Send");
        return true;
    } else if ((brand != "") && (country != "") && (region != "")) {
        alert("Send");
        return true;
    } else {
        alert("Impossible to send");
        return false;
    }
}

为了更好地阅读我添加的代码，即使没有必要也返回 true。

主要问题是不可能知道每种不同类型的输入有多少。我正在考虑尝试检查输入是否以品牌、型号、国家或地区开头，但我不知道如何在我的验证功能中使用所有可能的结果。

你们知道如何解决这个问题吗？

Answer 1

您需要一种通过名称开头访问所有品牌和模型元素的方法。

var elements = document.querySelectorAll("form[id='createform']>input[id^='brand']");

这将为您提供一个数组（而不是您的单值变量），您可以循环查找您的值。

漂亮的 querySelectorAll 接受选择器，可以将搜索范围缩小到所有匹配的元素。在示例中，它获取名为“createform”且以 (^=)“brand”开头的表单中的所有输入元素。

Answer 2

var brandelements = document.querySelectorAll("#createform select[name^='brand'] option:checked:not([value=''])");

这是获取选择的所有非空值的最佳方法（您可以使用普通输入轻松更改）。