javascript - 如果用户名存在于同一页面上，使用 AJAX 和 PHP 来 "Alert"用户？

Question

我发现许多 AJAX 脚本可以实时检查用户名是否存在于 MySQL 数据库中。例如，如果不存在，大多数可能会显示绿色复选图像，如果已经存在，则显示红色 x。

我对这种形式的稍微不同的方法感兴趣。

用户填写 10 个问题的测验，然后被带到用户注册表。如果用户完成了测验，我只想将他们的答案插入数据库。

目前，如果用户输入已存在的用户名或电子邮件，他们将在下一页收到错误消息，并被告知返回后才发现表单已重置。

这就是为什么我希望在同一页面上验证所有信息。

单击提交按钮后，将调用一个 javascript 函数来验证一些事情，例如用户是否输入了出生日期、是否没有将表单留空、密码是否匹配等。

如果不满足任何条件，它将返回 false，以便表单移至下一页，除非所有函数都返回 true。

这是它的样子。

function checkForm() {

if (checkUser() && checkPassword() && checkMonth() && checkDay() && checkAddress() && checkYear()) {
    document.getElementById("quizForm").method="post";
    document.getElementById("quizForm").action="register.php";
}
else {
    return false;
}
}

我有兴趣创建一个用户名/电子邮件检查功能，该功能使用 ajax 访问搜索数据库的 php 页面，如果用户名/电子邮件存在于数据库中，则返回 true 或 false 给 javascript。

那样的话，我可以只使用旧的 javascript 警报来说明用户名/电子邮件是否存在，然后返回 false，这样表单就不会提交。

这是我如何为此编写函数的示例:

function checkPassword() {
var pass1 = document.getElementById("pass").value;
var pass2 = document.getElementById("c_pass").value;
var pass1l = pass1.length;

if (pass1l < 5) {
    alert("Please create a password that is longer than 5 characters.");
    return false;
}
else {
    if (pass1 != pass2) {   
        alert("Your passwords do not match.");
        return false;
}
    else {
        return true;
    }
}

}

任何人都可以为此指出正确的方向吗？我一直在四处搜索，但没有找到任何特定的内容。

谢谢。

Answer 1

您可以在 <input> 的更改事件上发布 AJAX用户输入用户名的地方。考虑下面我快速组合的例子。它假定您有数据库表 users带列 id和 username .它还假定您有一个文件 check.php使用变量 $mysqli 中的 MySQLi 连接连接到此数据库表.当输入改变时，它会调用check.php ，唯一的数据是输入的用户名。根据响应，它将更新 <span id="info"> .

HTML:

<input id="username" type="text" /><span id="info">Exists/Does not exist</span>

Javascript(jQuery):

$(function() {

        $("#username").on("change", function() {

            var data = "user="+$("#username").val();

            $.ajax({
                type: 'POST',
                url: 'check.php',
                data: data,
                dataType: 'json',
                success: function(r)
                {
                    if(r=="1")
                    {
                        //Exists
                        $("#info").html("Username already exists");
                    }else{
                        //Doesn't exist
                        $("#info").html("Username available!");   
                    }
                }
            });

        });

});

PHP(检查.php):

$user = $_POST['user'];

    if($stmt = $mysqli->prepare("SELECT id FROM users WHERE username = ?"))
    {
        $stmt->bind_param('s', $user);
        $stmt->execute();
        $stmt->store_result();
        $stmt->bind_result($id);
        $stmt->fetch();
        if($stmt->num_rows>0)
        {
            echo "1";
        }else{
            echo "0";   
        }
    }

我在我当前的项目中使用了类似的功能，并且运行良好。特别是对于本地文件，响应时间得到了改进!

(为拼写错误保留，当时很匆忙)

希望这对您有所帮助。