自定义错误消息

本课属于 Coddy HTML 学习旅程的“JavaScript 实战”单元。第 6 课，共 27 课。

自定义错误消息可以帮助用户了解表单输入哪里有问题。让我们学习如何为表单验证创建并显示这些消息。

首先，我们来创建一个基本的输入框，并在它旁边放置一个 span，用来显示消息：

<input type="text" id="username" placeholder="Enter username">
<span id="usernameError" class="error"></span>

现在，让我们添加 JavaScript 来验证输入并显示自定义错误消息：

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    if (this.value.length < 5) {
        usernameError.textContent = "Username must be at least 5 characters long";
        usernameError.style.color = "red";
    } else {
        usernameError.textContent = "";
    }
});

当用户在输入框中输入内容时，事件监听器会检查用户名是否至少有 5 个字符。如果不足 5 个字符，就会显示一条红色错误消息。

挑战

简单

我们已经有一个页面，其中有一个用于输入邮箱的输入框，下面还有一个消息区域。

你的任务：在事件监听器中添加一个 if-else 语句，检查输入值是否包含 @ 符号。

如果包含 → 显示消息“Looks good!”
否则 → 显示消息“Please enter a valid email address”

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Custom error messages</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="form-container">
    <h2>Create Your Account</h2>
    <p class="subtitle">Join our newsletter for the latest updates</p>

    <form>
      <label for="email">Email Address</label>
      <input type="text" id="email" placeholder="e.g. user@example.com">
      <span id="emailError" class="message"></span>

      <button type="button">Subscribe</button>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>