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

【问题标题】：Simple form field validation for multiple input boxes in JavascriptJavascript中多个输入框的简单表单字段验证
【发布时间】：2014-04-04 17:34:10
【问题描述】：

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

【问题讨论】：

您应该使用 onchange 事件和 onsubmit，而不是使用间隔
我以前从未这样做过，所以我绝对愿意接受任何建议。我该怎么做呢？

标签： javascript html css forms

【解决方案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>

【讨论】：

【解决方案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（注意我使用了 change 和 keyup，因为 change 只会在离开输入后触发）

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

【讨论】：

哇，非常感谢！正是我想要的。