0

我的 ajax 联系表单验证有问题。错误检查有点作用。如果我输入了错误的电子邮件地址，它也会验证空名称字段，我尝试了不同的东西，但我认为我错过了一小部分。如果您回答我的问题，请您解释一下更改，我真的很想学习！

这是我的代码（或看到这个jsBin）：

阿贾克斯调用 

    $('form.ajax').on("keyup", function(e){
        e.preventDefault();

        var $this   =   $(this);
                data    =   {};

            $this.find('[name]').each(function(index, value){
                var $this   =   $(this),
                    name    =   $this.attr('name');
                    value   =   $this.val();

                data[name] = value;
            });


            $.ajax({
                url : "contact.php",
                type: "post",
                data: data,
                dataType: "json",

                success: function(response){

                    error_check(response);
                }
            });


        });

我用来检查错误并添加错误消息的功能

     function error_check(arr){

        $.each(arr, function(key, value){

            var el = $('li.' + key);

            if(value == true){

                if( el.hasClass('error') ){
                    $(el).removeClass('error')
                         .children('div.error').remove()
                         .addClass('validated')
                         .prepend('<div class="validated"></div>');
                }else{
                    $(el)
                        .addClass('validated')
                        .prepend('<div class="validated"></div>');
                }

            }else if(value == false){

                if( el.hasClass('validated') ){
                    $(el).removeClass('validated')
                         .children('div.validated').remove()
                         .addClass('error')
                         .prepend('<div class="error"></div>');
                }else{
                    $(el)
                        .addClass('error')
                        .prepend('<div class="error"></div>');
                }
            }
        });
    }

这是我的 php 验证代码：

 if($_SERVER['REQUEST_METHOD'] == 'POST'){

$validated = array();

$name       =    $_POST['name'];
$company    =    $_POST['company'];
$email      =    $_POST['email'];
$phone      =    $_POST['phone'];
$date       =    $_POST['date'];


/*Ajax validation*/

if(!empty($name) && strlen($name) >= 2){
    $validated['name'] = true;
}else{
    $validated['name'] = false;
}


if( !empty($email) ){
    $validate_email = filter_var($email, FILTER_VALIDATE_EMAIL);        

    if($validate_email){
        $validated['email'] = true;
    }else{
        $validated['email'] = false;
    }
}

echo json_encode($validated);
}else{
die();
}
4

1 回答 1

0

您的发布请求不包含date属性（至少在您的 jsBin 示例中）并且会触发错误。通常更建议事先检查参数是否存在：

$name       =    (isset($_POST['name']) ? $_POST['name'] : null;
$company    =    (isset($_POST['company']) ? $_POST['company'] : null;
$email      =    (isset($_POST['email']) ? $_POST['email'] : null;
$phone      =    (isset($_POST['phone']) ? $_POST['phone'] : null;
$date       =    (isset($_POST['date']) ? $_POST['date'] : null;

// check required parameters and exit if they're missing
if (is_null($name) || is_null($email)) {
    // some error handling here
} else {
    // and (almost) the rest of your existing script goes here
}

echo json_encode($validated);

[编辑]关于您的“每次按键时验证”方法：更好的方法是利用 html5 输入类型（例如<input type="email"…&gt;）并在提交之前在客户端上进行一些简单的验证（您不需要做那么多，所以它应该很简单）。您显然仍然需要在后端进行验证（但您只是将流量减少到几乎为零）！

于 2013-10-20T20:30:10.907 回答