基于AJAX的电子邮件验证器 - AJAX based email validator

我使用Ajax来检查我的注册表单中的字段是否有效。

我的验证函数:

<script type='text/javascript'>
    function validate(field, query) {
        xmlhttp = new XMLHttpRequest(); // Creating Object
        xmlhttp.onreadystatechange = function () // Checking if readyState changes
        {
            if (xmlhttp.readyState != 4 && xmlhttp.status == 200) // Validation Under Process 
            {
                document.getElementById(field).innerHTML = "Validating..";
            }
            else if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  // Validation Completed
            {
                document.getElementById(field).innerHTML = xmlhttp.responseText;
            }
            else // If an error is encountered
            {
                document.getElementById(field).innerHTML = "Unknown Error Occurred. <a href='index.php'>Reload</a> the page.";
            }
        }
        xmlhttp.open("GET", "check.php?field=" + field + "&query=" + query, false);
        xmlhttp.send();
    }
</script>

和我的check.php:

if ($field == "email") 
{
    $check = $db->prepare("SELECT * FROM users WHERE email = :query");
    $check->bindParam(':query', $query);
    $check->execute();
    $count = $check->rowCount();
    if ($count > 0)
    {
        echo "<script type='text/javascript'>document.getElementById('regr_btn').disabled = true;</script>";
        echo "<font color=red>Email already exists</font>";
    }
    else 
    {
        echo "<script type='text/javascript'>document.getElementById('regr_btn').disabled = false;</script>";
        echo "<font color=green>Email available</font>";
    }   
    if (!filter_var($query, FILTER_VALIDATE_EMAIL)) {
        echo "<font color=red><br />Please enter a valid Email</font>";
        echo "<script type='text/javascript'>document.getElementById('regr_btn').disabled = true;</script>";
    }
    else {
        echo "<script type='text/javascript'>document.getElementById('regr_btn').disabled = false;</script>";

我的echo "<font color=red>Email already exists</font>";工作完全正常。

但是正如你所看到的，我也尝试echo "<script type='text/javascript'>document.getElementById('regr_btn').disabled = false;</script>";当电子邮件已经存在于我的数据库中时。

但不知何故它不起作用。我还试图显示:none而不是禁用我的按钮，但仍然没有结果。

如果我把document.getElementById('regr_btn').disabled = true;到谷歌浏览器的控制台，那么它的工作很好。所以我的javascript没有被调用。

我希望你能帮助我。

如果我是您，我会切换到使用jQuery并简单地传递一个响应，然后在您的页面中处理响应。下面是一个简短的例子:

$.ajax({
    type: 'POST',
    url: '/path/to/php/file.php',
    data: {email: $('#email-field').val()},
    dataType: 'json',
    success: function(response) {
        if(response.count > 0) {
            $('#email-field-result').css('color', 'Red').text('E-mail already taken');
            $('#reg_btn').prop('disabled', true);
        } else {
            $('#email-field-result').css('color', 'Green').text('E-mail available');
            $('#reg_btn').prop('disabled', false);
        }
    }
});

和PHP:

$query = filter_input(INPUT_POST, "email", FILTER_VALIDATE_EMAIL);
$check = $db->prepare("SELECT * FROM users WHERE email = :query");
$check->bindParam(':query', $query);
$check->execute();
$count = $check->rowCount();
$return = array(
    'count'    => $count
);
echo json_encode($return);

如果你使用JSON返回你的响应，它允许你从PHP脚本返回复杂的响应

我的建议是使用php只返回响应:"有效"，"无效"，"重复"，然后在javascript函数执行ajax调用修改相应的DOM。

让php回显一些javascript是无稽之谈(至少我是这么认为的)

的例子:

if(data = "Valid") {
  $('#div_with_message').html('Email already exists');
}else{
  $('#reg_btn').attr('disabled',true);
}