javascript - Onsubmit 验证更改背景必填字段？

Question

有谁知道使用 Javascript 在提交时使用 class="required" 更改所有空白字段的背景颜色的好教程/方法？

Answer 1

像这样的东西应该可以解决问题，但是如果不发布更多详细信息，很难确切地知道您在寻找什么:

document.getElementById("myForm").onsubmit = function() {
    var fields = this.getElementsByClassName("required"),
        sendForm = true;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ff0000";
            sendForm = false;
        }
        else {
            //Else block added due to comments about returning colour to normal
            fields[i].style.backgroundColor = "#fff";
        }
    }
    if(!sendForm) {
        return false;
    }
}

这会将一个监听器附加到具有 id“myForm”的表单的 onsubmit 事件。然后它获取该表单中具有“必需”类的所有元素(请注意，旧版本的 IE 不支持 getElementsByClassName，因此您可能想查看那里的替代方案)，循环遍历该集合，检查每个值，如果发现任何空值，则更改背景颜色。如果有任何空的，它会阻止提交表单。

这是一个 working example .