簡單的表單字段驗證在Javascript中的多個輸入框

Question

我試圖讓多個表單元素根據它們是否爲空來自動進行樣式化。我能夠得到輸入數字1來工作，但我現在無法弄清楚如何讓函數適用於其他四個輸入框。

<script> 
var text = document.getElementById('text'); 

function checker() { 
    if (text.value === "") { 
     text.style.cssText = "border-width:5px;border-color:red;border-style:solid;border-radius:3px;"; 
    } else { 
    text.style.cssText = "border-width:5px;border-color:limegreen;border-style:solid;border-radius:3px;"; 
    } 
} 

setInterval(checker,100); 
</script> 

<input id="text"></input><br> 
<input id="text2"></input><br> 
<input id="text3"></input><br> 
<input id="text4"></input><br> 

這裏是我用來試圖讓它工作的jsfiddle。 Link

Answer 1

給每個輸入端的類似validate，然後讓每一個使用change/keyup事件偵聽器。然後，您可以添加一個submit事件提交前做最後的檢查

HTML

<form id="myform"> 
    <input class="validate" id="text"></input><br> 
    <input class="validate" id="text2"></input><br> 
    <input class="validate" id="text3"></input><br> 
    <input class="validate" id="text4"></input><br> 
    <button>Submit</button> 
</form> 

JS（請注意我用的變化和KEYUP因爲更改僅火災離開後輸入）

window.onload = function(){ 
    var inputs = document.getElementsByClassName("validate"); 
    if(inputs){ 
     for(var i=0; i<inputs.length; i++){ 
      inputs[i].addEventListener("change",validateInput); 
      inputs[i].addEventListener("keyup",validateInput); 
     } 
    } 
    var form = document.getElementById("myform"); 
    if(form){ 
     form.addEventListener("submit",validateForm,false); 
    } 
}; 

function validateInput(){ 
    if (this.value === "") { 
     this.style.cssText = "border-width:5px;border-color:red;border-style:solid;border-radius:3px;"; 
    } else { 
     this.style.cssText = "border-width:5px;border-color:limegreen;border-style:solid;border-radius:3px;"; 
    } 
} 

function validateForm(e){ 
    inputs = document.getElementsByClassName("validate"); 
    var hasEmpty = false; 
    for(var i=0; i<inputs.length; i++){ 
     validateInput.call(inputs[i]); 
     if(inputs[i].value==="") hasEmpty = true; 
    } 
    if(hasEmpty){ 
     e.preventDefault(); 
    } 
} 

JSFIDDLE DEMO

如果你是開放的使用jQuery，這將減少對你的代碼

$(document).ready(function(){ 
    $(".validate").change(validateInput); 
    $(".validate").keyup(validateInput); 
    $("#myForm").submit(validateForm); 
}); 

function validateInput(){ 
    if (this.value === "") { 
     $(this).css({ 
      borderWidth:"5px", 
      borderColor:"red", 
      borderStyle:"solid", 
      borderRadius:"3px" 
     }); 
    } else { 
     $(this).css({ 
      borderWidth:"5px", 
      borderColor:"limegree", 
      borderStyle:"solid", 
      borderRadius:"3px" 
     }); 
    } 
} 

function validateForm(e){ 
    var hasEmpty = false; 
    $(".validate").each(function(index,input){ 
     $(input).change(); 
     if(input.value==="") hasEmpty = true; 
    }); 
    if(hasEmpty){ 
     e.preventDefault(); 
    } 
} 

Answer 2

<script> 
var button = document.getElementById('button'); 
var test = document.getElementsByName('test'); 

function checker() { 
    var elementsToTest = ["text", "text2", "text3", "text4"]; 
    for (var i = 0; i < elementsToTest.length; i++) { 
     var el = document.getElementById(elementsToTest[i]); 

     if (el.value === "") { 
      el.style.cssText = "border-width:5px;border-color:red;border-style:solid;border-radius:3px;"; 
     } else { 
     el.style.cssText = "border-width:5px;border-color:limegreen;border-style:solid;border-radius:3px;"; 
     } 
    } 
} 

setInterval(checker,100); 
</script>