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

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

Answer 2

为每个输入提供类似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（注意我使用更改和密钥，因为更改仅在离开输入后触发）

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