使用 JS 进行表单验证 [重复]答案

【问题标题】：Form validation with JS [duplicate]使用 JS 进行表单验证 [重复]
【发布时间】：2021-08-28 19:08:04
【问题描述】：

我正在尝试进行表单验证，但我认为我的按钮不起作用。我对具有“可见性：隐藏”样式的段落进行了此操作，如果在输入字段中没有输入任何内容，我想在单击按钮时将其更改为“可见性：可见”。我能做些什么来修复它？这是JS代码：

document.querySelector("cta-btn").addEventListener("click", function() {
    let name = document.getElementsByClassName("first-name").value;
    if (name == "") {
        document.getElementsByClassName("name-error").style.visibility = "visible";
        document.getElementsByClassName("first-name").style.border = "1px solid red"
    }
});

【问题讨论】：

对不起@HereticMonkey，因为我勇敢地回答问题只是为了帮助某人，而不是指着他的脸说有人已经提出了一个“可能解决他的问题”的问题......通过将此问题标记为重复，我已帮助您对重复问题进行了无情的研究，祝您搜索顺利
@AlbertoSinigaglia 将问题标记为重复可以帮助 OP 与回答一样多，因为它会立即（如果重复识别足够快）引导他们回答他们的问题，并帮助其他人（即，毕竟，Stack Overflow 的目的是帮助很多人，而不是一次只帮助一个人），如果他们有同样的问题，他们会为这些答案提供路标。
@HereticMonkey 随时向所有回答此问题的人报告此消息

标签： javascript forms validation

【解决方案1】：

getElementsByClassName 返回一个数组。如果您只有一个要使其可见的该类的元素，则可以通过访问 0-index 元素来获取第一个元素

document.querySelector("cta-btn").addEventListener("click", function() {
    let name = document.getElementsByClassName("first-name")[0].value;
    if (name == "" || name == null) {
        document.getElementsByClassName("name-error")[0].style.visibility = "visible";
        document.getElementsByClassName("first-name")[0].style.border = "1px solid red"
    }
});

【讨论】：

【解决方案2】：

getElementsByClassName("first-name") 返回一个数组类型而不是单个元素，[0] 获得第一个匹配

getElementsByClassName("first-name")[0].value

【讨论】：