.each() 循环中的 JavaScript 数组不添加新元素

Question

我正在使用 HTML5 'pattern' 属性和相应的 JS 测试一些表单验证。完全披露，如果这有什么不同的话，我会坚持使用 IE 11。

到目前为止，我已经能够让我的脚本循环并从 HTML 输入中提取模式，并将它们转换为 .test() 方法的正则表达式。验证部分似乎正在运行。

我想将表单输入存储到一个数组中，例如：formData[fieldData, fieldData, fieldData]

...并将它们的验证状态存储到另一个数组中，例如：validationStates[true, false, true]

...然后启用 SUBMIT 按钮一次。every() validationState 为 true（尚未在代码中）。

我的问题是我的数组只有 1 个元素长 - 新值不会被 .push() 发送给它们。控制台始终报告每个数组的 .length 为 1，就好像它在循环的每次传递期间都被覆盖（我也尝试过非破坏性的 .splice()，如您所见）。我做错了什么？

$("input").change(function() {
  console.clear();
  $("[required]").each(function(index) {         // find all required form fields
    var fieldData, regex;                          // init variables
    var formData = [];                             // init array for form input data
    var validationStates = [];                     // init array for validation states
    
    fieldData = $(this).val();                     // get form values and store
    regex = new RegExp($(this).attr("pattern"));   // pull regex from pattern(s)
    formData.splice(index, 0, fieldData);          // store the field inputs in an array
    validationStates.push((regex.test(fieldData)));
    
    console.log(formData);
    console.log(index);
    console.log(validationStates);
  });
});

.form-control, .btn {
  margin-top: 10px;
}

input:invalid, textarea:invalid {
  border: 1px dotted #F33 !important;
  color: #E33 !important;
}

input:valid, textarea:valid {
  border: 1px dotted #2C8 !important;
  color: #2C8;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="validated_form">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        <input class="form-control" id="name" pattern="^[^\s][a-zA-Z\s-.]*$" placeholder="name" required="" title="only letters and &#39;-&#39;" type="text" />
      </div>
      <div class="col-xs-6">
        <input class="form-control" id="time" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]" placeholder="time (HH:mm)" required="" title="24H time in HH:mm or H:mm format" type="text" />
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <input class="form-control" id="pattern" pattern="^[^&lt;&gt;\s].{5,}$" placeholder="HTML5 pattern matching test (a-z only, more than 5 characters)" required="" title="must be more than 5 characters" type="text" />
      </div>
    </div>
    <div class="row">
      <div class="col-xs-offset-4 col-xs-4">
        <button class="btn btn-md btn-block btn-info disabled" disabled="true" id="sub" type="submit" value="SUBMIT">Submit Form</button>
      </div>
    </div>
  </div>
</form>

Answer 1

在 .change() 和 .each() 循环之前声明你的数组... 最好在循环中使用 let 而不是 var

解释性编辑： 你正在做的是你声明一个新数组的每个循环的每次迭代......所以它只包含一个元素

编辑： 好吧，现在我重新阅读了...使用数组来存储您的验证状态是毫无意义的...只需执行以下操作：

change() {
    let errors = false;
    each() {
        errors = !Regexp.isItValid(input)
    }
    if(!errors)
        proceed()
}

伪代码，但你明白我的意思

我知道现在内存很便宜，但你仍然不应该无缘无故地浪费它......