.each（）循環中的JavaScript數組不添加新元素

Question

我使用HTML5'模式'屬性和相應的JS測試了一些表單驗證。充分披露，如果這有什麼不同，我堅持使用IE 11。

到目前爲止，我已經能夠讓我的腳本循環並從HTML輸入中拉出模式，並將它們轉換爲.test（）方法的RegExp。驗證部分似乎正在工作。

我想的形式輸入存儲到一個數組，例如：FORMDATA [fieldData，fieldData，fieldData]

...和它們的驗證狀態存儲到另一個數組，例如：validationStates [真，假，真]

...，然後啓用提交按鈕一次。每（）validationState是真（而不是在代碼還）。

我的問題是，我的數組只有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之前宣佈的陣列（）和。每個（）循環...... 和更好的使用讓代替循環

解釋編輯裏面VAR： 你在做什麼是每個循環的每一個迭代你聲明一個新的數組..所以它只包含一個元素

編輯： 現在好了，我重新閱讀......這是毫無意義的使用數組來存儲您的驗證狀態......只是這樣做：

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

僞代碼，但你得到了我的意思

我知道內存現在便宜，但你仍然不應該浪費它沒有理由...