HTML + CSS + JavaScript 实现注册页面信息验证详细教程（表单验证）




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面信息验证</title>
    <style>
        .error {
            color: red;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <form id="registrationForm">
        用户名: <input type="text" id="username" name="username"><br><br>
        密码: <input type="password" id="password" name="password"><br><br>
        确认密码: <input type="password" id="confirm_password" name="confirm_password"><br><br>
        邮箱: <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="注册">
    </form>
 
    <script>
        document.getElementById('registrationForm').onsubmit = function(e) {
            e.preventDefault();
 
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var confirm_password = document.getElementById('confirm_password').value;
            var email = document.getElementById('email').value;
 
            // 验证用户名
            if (username.length < 6) {
                showError('用户名长度必须大于6个字符。');
                return;
            }
 
            // 验证密码
            if (password !== confirm_password) {
                showError('密码和确认密码不匹配。');
                return;
            }
 
            // 验证邮箱
            if (!email.includes('@')) {
                showError('请输入有效的邮箱地址。');
                return;
            }
 
            // 验证通过，提交表单
            this.submit();
        };
 
        function showError(errorMessage) {
            alert(errorMessage);
        }
    </script>
</body>
</html>

这段代码实现了一个简单的注册页面，并在用户尝试提交表单时进行验证。如果任何验证规则失败，它将显示一个错误消息，并取消表单的提交。如果所有验证都通过，它将提交表单。这个例子教会了如何使用JavaScript进行简单的表单验证，并展示了如何通过alert函数显示错误消息。

HTML + CSS + JavaScript 实现注册页面信息验证详细教程（表单验证）

评论已关闭

推荐阅读