使用 JS 进行表单验证

Question

我正在尝试进行表单验证，但我认为我的按钮不起作用。我用具有“可见性：隐藏”样式的段落执行此操作，如果输入字段中没有键入任何内容，我想在单击按钮时将其更改为“可见性：可见”。我能做些什么来修复它？这是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"
    }
});

Answer 1

getElementsByClassNamereturns一个数组。如果您只有一个元素 class 要显示，则可以通过访问 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"
    }
});

Answer 2

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

getElementsByClassName("名字")[0].value

使用 JS 进行表单验证

Form validation with JS

javascript

forms

validation