jquery 表单注册

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 表单注册</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<form id="registerForm">
    <input type="text" id="username" name="username" placeholder="用户名" required>
    <input type="email" id="email" name="email" placeholder="邮箱" required>
    <input type="password" id="password" name="password" placeholder="密码" required>
    <button type="submit">注册</button>
</form>

<script>
$(document).ready(function() {
    $('#registerForm').submit(function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var username = $('#username').val();
        var email = $('#email').val();
        var password = $('#password').val();

        // 基本的客户端验证
        if (username === '' || email === '' || password === '') {
            alert('所有字段都是必填的');
            return;
        }

        // 使用 Ajax 提交表单数据
        $.ajax({
            url: '/register', // 服务器端处理注册请求的 URL
            type: 'POST',
            data: {
                username: username,
                email: email,
                password: password
            },
            success: function(response) {
                alert('注册成功！');
                // 可以在这里添加跳转到登录页面或其他逻辑
            },
            error: function(xhr, status, error) {
                alert('注册失败：' + xhr.responseText);
            }
        });
    });
});
</script>

</body>
</html>