网页设计基础第三十六讲：JavaScript实现表单验证本文介绍如何通过JavaScript实现一个具有即时反馈功能的注

本文介绍如何通过JavaScript实现一个具有即时反馈功能的注册表单校验。通过阻止默认提交、清除旧错误信息、逐个字段验证（姓名、电子邮件、密码）以及根据校验结果展示相应提示，确保用户输入的数据准确无误，从而提升用户体验并保证系统数据质量。

任务描述

实现如下注册表单的校验。整个校验过程的逻辑依赖于用户在输入表单之后及时反馈。在校验时，通过逐个检查每个输入字段的合法性，确保用户提供的信息有效且符合要求。通过这种方式，可以提升用户体验，减少无效数据的提交，确保系统的数据准确性。要求如下：

用户名必须为4-16个字符，且只能包含字母、数字和下划线。
电子邮件地址必须符合标准的电子邮件格式。
密码必须至少包含一个大写字母、一个小写字母、一个数字和一个特殊字符，且长度为8-16个字符。

表单准备

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验示例</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
        }
        .error { 
            color: red; 
        }
        .success { 
            color: green; 
        }
    </style>
</head>
<body>
    <h2>注册表单</h2>
    <form id="registrationForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>
        <span id="nameError" class="error"></span><br><br>

        <label for="email">电子邮件:</label>
        <input type="email" id="email" name="email" required>
        <span id="emailError" class="error"></span><br><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required minlength="6">
        <span id="passwordError" class="error"></span><br><br>

        <input type="submit" value="提交">
        <div id="formMessage" class="success"></div>
    </form>
</body>
</html>

任务实施

校验过程

阻止表单默认提交

当用户点击 "提交" 按钮时，JavaScript 的 addEventListener 方法会捕捉到 submit 事件，随后 event.preventDefault() 被调用。这一行代码用于阻止表单的默认提交行为，以便在提交之前进行校验。
```
document.getElementById("registrationForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 防止表单提交
});
```
清除以前的错误信息

在进行新的校验之前，首先清除之前错误提示区域的内容。通过选择所有带有 error 类的元素，并将其文本设置为空，确保用户不会看到旧的错误信息。
```
const errors = document.querySelectorAll(".error");
errors.forEach(error => error.innerText = "");
```
初始化验证标志

使用一个布尔值 isValid，初始值设为 true。如果在校验过程中发现任何错误，将其设为 false，以表示表单数据无效。
```
let isValid = true; // 验证标志
```
校验姓名字段
- 使用 trim() 方法去除字符串前后的空格，并检查姓名是否为空字符串。
- 如果姓名为空，则在对应的错误提示区域显示错误信息，并将 isValid 设置为 false。

           // 校验用户名
            const username = document.getElementById('username').value;
            const usernameError = document.getElementById('usernameError');
            const usernameRegex = /^[a-zA-Z0-9_]{4,16}$/;
            if (!usernameRegex.test(username)) {
                usernameError.textContent = '用户名必须为4-16个字符，且只能包含字母、数字和下划线。';
                isValid = false;
            } else {
                usernameError.textContent = '';
            }

5. 校验电子邮件字段

*   获取电子邮件输入值，并使用正则表达式来检查其格式是否正确。
*   如果电子邮件格式不符合正则表达式要求，则显示错误信息并设置 `isValid` 为 `false`。

    // 校验电子邮件地址
            const email = document.getElementById('email').value;
            const emailError = document.getElementById('emailError');
            const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!emailRegex.test(email)) {
                emailError.textContent = '电子邮件地址格式不正确。';
                isValid = false;
            } else {
                emailError.textContent = '';
            }

6. 校验密码字段

*   获取密码输入值，然后检查密码长度是否至少为 8 个字符。
*   如果密码不符合规定，即长度小于8，则在错误提示区域显示相应的错误信息，`isValid` 被设为 `false`。

  // 校验密码
            const password = document.getElementById('password').value;
            const passwordError = document.getElementById('passwordError');
            const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,16}$/;
            if (!passwordRegex.test(password)) {
                passwordError.textContent = '密码必须至少包含一个大写字母、一个小写字母、一个数字和一个特殊字符，且长度为8-16个字符。';
                isValid = false;
            } else {
                passwordError.textContent = '';
            }

7. 判断校验结果并显示成功信息

*   校验完成后，检查 `isValid` 的值。如果仍为 `true`，表示所有字段都有效，便显示表单提交成功的消息。
*   否则，页面不会进行提交，用户可以根据错误提示进行修改。

<!---->

    if (isValid) {
        document.getElementById("formMessage").innerText = "表单提交成功！";
    }

网页设计基础第三十六讲：JavaScript实现表单验证

任务描述

表单准备

任务实施

校验过程

实验实训