如何使用addEventListener进行输入验证？

addEventListener 是 JavaScript 中的一个方法，用于在指定元素上添加事件监听器。通过使用 addEventListener，你可以为表单输入字段添加事件监听器，以便在用户输入时执行验证逻辑。

基础概念

事件监听器是一种机制，允许你在特定事件（如用户点击按钮、输入文本等）发生时执行特定的代码。addEventListener 方法接受三个参数：

事件类型：要监听的事件名称，例如 'input'、'change' 等。
回调函数：当事件发生时要执行的函数。
选项（可选）：一个对象，包含一些选项，如 capture、once、passive 等。

类型

常见的事件类型包括：

'input'：当输入字段的值发生变化时触发。
'change'：当输入字段的值发生变化并且失去焦点时触发。
'blur'：当输入字段失去焦点时触发。

应用场景

输入验证是 addEventListener 的一个常见应用场景。例如，你可以为表单输入字段添加事件监听器，以实时验证用户输入的数据是否符合要求。

示例代码

以下是一个使用 addEventListener 进行输入验证的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input Validation</title>
    <style>
        .invalid {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <form>
        <label for="email">Email:</label>
        <input type="email" id="email" required>
        <span id="emailError" style="color: red; display: none;">Invalid email</span>
        <br><br>
        <button type="submit">Submit</button>
    </form>

    <script>
        const emailInput = document.getElementById('email');
        const emailError = document.getElementById('emailError');

        emailInput.addEventListener('input', function(event) {
            const email = event.target.value;
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (emailRegex.test(email)) {
                emailInput.classList.remove('invalid');
                emailError.style.display = 'none';
            } else {
                emailInput.classList.add('invalid');
                emailError.style.display = 'inline';
            }
        });
    </script>
</body>
</html>

解释

HTML 结构：创建一个包含电子邮件输入字段和错误消息的表单。
CSS 样式：定义一个 .invalid 类，用于在输入无效时高亮显示输入框。
JavaScript 逻辑：
- 获取电子邮件输入字段和错误消息元素。
- 使用 addEventListener 为电子邮件输入字段添加 'input' 事件监听器。
- 在事件处理函数中，使用正则表达式验证输入的电子邮件地址。
- 根据验证结果，添加或移除 .invalid 类，并显示或隐藏错误消息。