Question

我使用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没有被调用。

我希望你能帮助我。

Answer 1

如果我是你，我会转而使用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脚本中传回复杂的响应。

Answer 2

我的建议是仅使用php来返回如下响应：＆＃34;有效＆＃34;，＆＃34;无效＆＃34;，＆＃34;复制＆＃34;然后在执行ajax调用的javascript函数中相应地修改DOM。

让php回应一些javascript是一种废话（至少我的意见）。

示例：

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

基于AJAX的电子邮件验证器

2 个答案: