Question

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

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

我想将表单输入存储到数组中，例如： 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()
}

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

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

.each（）循环内的JavaScript数组不添加新元素

1 个答案: