模糊检查动态检查SQL数据库中是否存在电子邮件？

Question

我正在写一个Wordpress PHP表单，该表单使用提交创建数据库条目。 我想动态检查用户已输入表单的电子邮件地址是否已经在数据库中。

目前，检查是在提交表单时进行的，但是我希望在用户从电子邮件字段中跳出后动态地进行检查，并且我不确定如何完成此操作。 我假设我将需要使用AJAX或类似的东西。

这是我的表单页面中的代码：

<form action="<?php echo get_template_directory_uri(); ?>/inc/form.php" method="post">
    <label for="first_name">First Name: <span>(required)</span></label>
    <input type="text" name="first_name" />

    <label for="last_name">Last Name: <span>(required)</span></label>
    <input type="text" name="last_name" />

    <label for="email">Email: <span>(required)</span></label>
    <input type="text" name="email">

    <input type="submit">
</form>

这是我的form.php文件中代码的一部分，该代码检查重复的条目：

$dupQuery = $wpdb->query("SELECT email FROM users WHERE email='".$email."'");

if ($dupQuery != 0) {
    print "Email already exists";
} else {
    //store entry in database
}

谁能指出我正确的方向？ 谢谢！

Answer 1

您将需要一个新的页面来执行db查找（在Ajax代码底部查找一个虚拟页面/whatever/directory/lookup_page.php ）。 该页面将引用该页面，因此该页面必须存在，否则将无法使用。 如果电子邮件返回true，您可能想找到一种禁用jQuery提交按钮的方法。 如果电子邮件不在数据库中，则您的提交按钮将保持活动状态，并且用户在完成后单击提交。 无论如何希望这至少有助于理解Ajax。 另外，我执行了keyup而不是模糊操作，因此它逐键查找。 您可以更改它。

<form action="<?php echo get_template_directory_uri(); ?>/inc/form.php" method="post">
    <label for="first_name">First Name: <span>(required)</span></label>
    <input type="text" name="first_name" />

    <label for="last_name">Last Name: <span>(required)</span></label>
    <input type="text" name="last_name" />

    <label for="email">Email: <span>(required)</span></label>
    <input type="text" name="email" id="email" onKeyUp="AjaxLookup()">
    <div id="emailchecker"></div>
    <input type="submit">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">

     function AjaxLookup() {
             var emAddr = $('#email').val();

             $.ajax({
                     url:"/whatever/directory/lookup_page.php?email="+emAddr,
                     success:function(result) {
                         $("#emailchecker").html(result);
                    }
                 });
            }
 </script>