输入验证

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

创建表单时，用户输入内容后立即提供即时反馈非常重要，这样他们就不会提交错误信息。这称为实时验证。

首先，我们来创建一个基本的文本输入框。我们要检查用户名长度是否至少为 5 个字符。

<input type="text" id="username" placeholder="Enter username">

现在，添加一个事件监听器，在用户输入时验证输入内容：

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

usernameInput.addEventListener('input', function() {
    // 获取当前值
    const value = this.value;
    
    // 检查它是否符合要求
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

如果用户名少于 5 个字符，边框会变成红色；如果用户名有效，边框会变成绿色。

挑战

简单

我们有一个带电子邮件输入框的页面。目前，它不会验证电子邮件格式。

你的任务是补全现有 if 代码块中的这一行，使得：

当电子邮件包含 "@" 时，
输入框的边框变为 "2px solid rgb(0, 250, 0)"。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

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