对具有相同 id 的多个元素进行文本验证

Text validation on multiple elements with the same id

本文关键字：元素 验证 文本 id      更新时间：2023-09-26

我有多个表单的输入元素，它们在同一页面中具有相同的ID。每个窗体在添加新团队名称、修改团队名称或删除团队名称时具有相同的操作（创建、更新和删除）。我试图想出一种简单的文本验证技术，以便在该特定形式的文本框为空时显示一条消息。我想出了这个，它适用于页面中第一个表单中的第一个元素。

    function showProgressOfNameChange(){
    var newName = document.getElementById("newName").value;
     if (newName == null || newName == "") {
       document.getElementById("error").innerHTML = "Name must not be empty";
       document.getElementById("newName").style.backgroundColor = "#ff8";
       return false;
       }
     $("#loading-div-background").show();
 }

但这不适用于同一页面中 id=newName 的其他元素。也许我应该使用 getElementsByClass，但不确定如何让它工作......如果我将所有 id 更改为唯一，如何编写函数来检查多个唯一 ID？

正如你所建议的，你需要使用class而不是ID，因为ID必须是唯一的，那么你可以使用getElementsByClassName（）来获取所有元素与所述类，然后你迭代返回的元素列表并对每个项目进行验证

function showProgressOfNameChange() {
    var els = document.getElementsByClassName("newName"),
        newName;
    for (var i = 0; i < els.length; i++) {
        newName = els[i].value;
        if (newName == null || newName == "") {
            document.getElementById("error").innerHTML = "Name must not be empty";
            els[i].style.backgroundColor = "#ff8";
            return false;
        }
    }
    $("#loading-div-background").show();
    return true;
}

既然你用jQuery标记了它

function showProgressOfNameChange() {
    var valid = true;
    $('.newName').each(function () {
        if (this.value == null || this.value == "") {
            valid = false;
            $(this).css('background-color', '#ff8');
        }
    })
    $("#loading-div-background").toggle(valid);
    $("#error").toggle(!valid)
    if (!valid) {
        $("#error").html("Name must not be empty");
    }
    return valid;
}

演示：小提琴

相关文章：