Javascript中多个输入框的简单表单字段验证

我试图让多个表单元素根据它们是否为空自动设置样式。我能够让输入数字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>

var text=document.getElementById（'text'）；
函数检查器（）{
如果（text.value==“”）{
text.style.cssText=“边框宽度：5px；边框颜色：红色；边框样式：实心；边框半径：3px；”；
}否则{
text.style.cssText=“边框宽度：5px；边框颜色：灰色；边框样式：实心；边框半径：3px；”；
}
}
设置间隔（检查器，100）；

这是我用来让它工作的JSFIDLE。

var button=document.getElementById（'button'）；
var test=document.getElementsByName（'test'）；
函数检查器（）{
var elementsToTest=[“text”、“text2”、“text3”、“text4”]；
for（var i=0；i

给每个输入一个类，如

验证

，然后让每个输入使用

更改/keyup

事件侦听器。然后，您可以添加一个

submit

事件，以便在提交之前进行最终检查

HTML

---

您应该使用onchange事件和onsubmit，而不是intervalI，因为我以前从未这样做过，所以我绝对愿意接受任何建议。我该怎么做呢？哇，非常感谢！正是我想要的。

<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>

<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>

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();
    }
}

$(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();
    }
}