使用 JavaScript 创建注册表单时出现错误消息重叠

Question

我一直在尝试创建带有关于条件验证的错误消息的注册表单。 实现在浏览器上获取错误消息，但消息重叠。 完整代码已上传至 Github。 请让我知道错误。 https://github.com/manojsiva/CapStone_Project_Using_JavaScript 。

Answer 1

你犯了几个错误：

您在开始时初始化的所有变量都设置为空字符串"" ，因为当您获得输入字段的值时，即浏览器解析您的 JS 文件时，用户还没有输入任何内容。 这是人们常犯的错误。 相反，您只需查询元素，然后在用户提交时检索值。 像这样：

const username = document.getElementById("username");

//then later retrieve the value:
const usernameValue = username.value.trim();

但是，每次需要检索一个值时输入这么多是很烦人的，您可以创建一个 function 来做到这一点：

function value(element) {
    return element.value.trim();
}

value(username);

另一件事是您的checkInput()永远不会返回任何内容，因此它始终评估为underfined精细，这就是为什么它每次都进入您的“真实”语句中的原因。 因此，无论用户是否填写了所有字段， checkInput()都应该返回 boolean true或false 。

据我所知， setErrorFor(input, message)和setSuccessFor(input)将input作为elements ，但是您将variables传递到这些 function 中。 您需要再次检查