0

我一直在尝试使用 jQuery 和 Ajax 验证在输入字段中键入的电子邮件地址。似乎我的验证 PHP 中的 jQuery addClass 和 removeClass 似乎不适用于主 PHP 文件。

这是我的代码：- 

<table cellspacing="10px" cellspacing="5px" class="sign_up_table">

    <tr>
        <td>
        <input class="ui_input2 no_space inpt1913" id="input_email" type="email" name="i_email" style="height:25px; width:300px; font-size:16px;" required />
        </td>
        <td id="input_email_error">
        <img src="img/a_loader.gif" id="a_loader_i" style="display:none; position:relative; top: 2px;" />
        </td>
</table>

我的 jQuery：

    $(document).ready(function() {
        $('#input_email').on('input',function(e){
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            var val_i_email = $("#input_email").val();

            var empty = false;
            $('#input_email').each(function() {
                if (val_i_email < 5 || !emailReg.test(val_i_email)) {
                    empty = true;
                }
            });

            if (empty) {
                $(this).addClass("invalid");
                $(this).removeClass("valid");

                $email_valid = false;

                    } else {
            var i_email = $("#input_email").val();
            $('#a_loader_i').show();

            $.ajax({
            type: "POST",
            url: '/script/validate_email.php',
            data: {i_email:i_email},
            cache: false,
            success: function(){
                $("#a_loader_i").hide();

                $email_valid = true;
                }
            });
        }
    });
});

PHP： 

// include pdo config
include_once ('config.php');

    // store the values submitted by form in variable
    $email=$_POST['i_email'];

    // query
    foreach($pdo->query("SELECT * FROM Users WHERE email='$email'") as $row); {
        if ($email == $row['Email']) {
            echo "<script>
                    $('#input_email_error').append('This email has already been taken');
                    $('#input_email').addClass('invalid');
                    $('#input_email').removeClass('valid');
                    $('#a_loader_i').hide();
                  </script>";

        }else{
            echo "<script>
                    $('#input_email').addClass('valid');
                    $('#input_email').removeClass('invalid');
                    $('#a_loader_i').hide();
                  </script>";
        }
    }

$pdo = null;
4

3 回答 3

1

看起来您在期望被调用的 ajax 调用中返回 HTML。不是这样做，而是让您 php 返回一个您检查的 JSON 编码的真/假，然后让成功回调执行您在 php.ini 中尝试的逻辑。

在javascript中做：

 $.ajax({
            type: "POST",
            url: '/script/validate_email.php',
            data: {'i_email':i_email},
            cache: false,
            success: function(data){
                if(data.valid) {
                    $('#input_email').addClass('valid');
                    $('#input_email').removeClass('invalid');
                    $('#a_loader_i').hide();
                } else {
                    $('#input_email_error').append('This email has already been taken');
                    $('#input_email').addClass('invalid');
                    $('#input_email').removeClass('valid');
                    $('#a_loader_i').hide();
                }
            });

在php中：

 if ($email == $row['Email']) {
      $valid = false;
 } else {
      $valid = true;
 }

 echo json_encode(array('valid' => $valid));

如果电子邮件有效与否，您将获得 php 返回，并且页面本身决定如何处理。

于 2013-04-30T16:33:01.637 回答
0

没有看到你的 config.php，我看不到全貌，但我猜你应该echo json_encode($response);在你的 php 文件中

$response应包含以下内容：

如果接受电子邮件：

$response = array(
        'success' => true,
        'note' => "Accepted"
    );

或者如果电子邮件存在/无效：

$response = array(
        'success' => false,
        'note' => "This email has already been taken"
    );

然后在jquery中成功：

    success: function(response){
        if(response.success){
            $('#input_email').addClass('valid');
            $('#input_email').removeClass('invalid');

        } else {
            $('#input_email').addClass('invalid');
            $('#input_email').removeClass('valid');

        }
        $('#input_email_error').append(response.note);
        $('#a_loader_i').hide();
    }
于 2013-04-30T16:36:32.787 回答
-1

$email=$_POST['i_email'];在您的 PHP 代码中查找i_email在您的帖子值中命名的项目。如果您可以看到该字符串，它看起来像i_email=sting@mail.com（也可能是 url 编码的）。

在您的 AJAX 中，您将键定义为与您的值相同。所以

else {
        var i_email = $("#input_email").val(); //You define your variable.

        $('#a_loader_i').show();

        $.ajax({
        type: "POST",
        url: '/script/validate_email.php',
        data: {i_email:i_email},  //Outputs as 'you@mail.com:you@mail.com'
        cache: false,
        success: function(){
            $("#a_loader_i").hide();

            $email_valid = true;
            }
        });
    }

您可能希望将 i_email:i_email 更改为email:i_email或类似的内容，然后$_POST['email']在您的 PHP 中。

于 2013-04-30T16:42:00.690 回答