Question

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

情景

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

品牌
模型
国家
区域

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

在开始场景中，只有brand1和model1。只需单击按钮即可添加国家和地区输入。

验证条件

我必须在两种情况下提交表单：

如果至少有一个品牌+一个型号，其中两个品牌都不是空的（任何品牌和任何型号，所以它也可以是品牌5和型号12）
如果至少有一个品牌+国家+地区不为空（所有这些都不是空的，逻辑与以前相同）

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

代码

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=''])");

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

动态输入的Javascript验证以及将输入与某些逻辑组合

2 个答案: