Question

我试图检查使用jquery和php提交的表单。正在向服务器发出.ajax请求，以验证是否已将数据输入到表单中，并根据服务器的回调响应执行不同的操作。例如，如果未输入firstname或未输入lastname，则显示错误消息。

问题是当两者都未输入时，回调返回消息firstname和lastname，而不会泄露错误消息。

        // JavaScript Document
        $(function(){
            $("#form").submit(function(event){
                $("#name_alert").css("display,none");
                event.preventDefault();
                  $.ajax({
                      url:'functions/register_user.php',
                      type:"POST",
                      data:$(this).serialize(),
                      success:function(data){  
                           if(data=='true') 
                                {  
                                    $("#form").effect("shake", {times:2}, 600); 
                                    $("#alert").fadeIn("slow");
                                    $("#note").fadeIn("slow").html('<strong>ERROR</strong>: Your details were incorrect.');  
                                }
                            if(data=='name'){
                                    $("#name_alert").fadeIn("fast").effect("shake", {times:1}, 600);
                                    $("#name_note").html('<strong>ERROR</strong>: Your first name must be in the range
                                     of 2 to 20 characters long.'); 
                                }
                            if(data=='surname'){
                                    $("#surname_alert").fadeIn("fast").effect("shake", {times:1}, 600);
                                    $("#surname_note").html('<strong>ERROR</strong>: Your surname must be in the range
                                     of 2 to 20 characters long.'); 
                                }
                            else { 
                                    $("#name_alert").fadeOut("fast");
                                    $("#note").html('<strong>PERFECT</strong>: You may proceed. Good times.');  
                                    }  
                              }  
                        });
            });
        });

服务器端代码正在检查表单中的字段是否为空，并回显相应的消息，如firstname或lastname。然后，jquery根据服务器的输出显示正确的消息。

Answer 1

以下是如何完成的示例。我试图保持简单：

服务器端响应示例：

// If the posted value was left empty or not received return an error in json format.
If ( empty($_POST['value']) )
{
    echo json_encode(
         array('status' => false, 'error' => 'The value cannot be left empty'));
    return true;
}

客户端ajax示例：

$.ajax({
    url: "/url/to/your/script",
    type: "POST",
    data: 'your=data',
    dataType: "json",
    success: function(reply){
        // If the reply.status is false, show the error status message
        if( !reply.status ){
            alert( reply.error );
        }
    }
});

Answer 2

您目前在以下情况下进行错误检查：

如果返回的数据为“true”。
如果返回的数据是“name”。
如果返回的数据是“surname”，并带有一条说明数据完美的else语句。

这些问题包括：没有检查是否返回了BOTH姓氏和姓名。其次，返回数据是否完美的else语句附加到if（data =='surname'），这意味着如果它不是姓氏的问题，它将返回它是完美的。

if (data == 'true') {
    $("#form").effect("shake", {times:2}, 600); 
    $("#alert").fadeIn("slow");
    $("#note").fadeIn("slow").html('<strong>ERROR</strong>: Your details were incorrect.');  
} else if (data == 'name') {
    $("#name_alert").fadeIn("fast").effect("shake", {times:1}, 600);
    $("#name_note").html('<strong>ERROR</strong>: Your first name must be in the range of 2 to 20 characters long.'); 
} else if (data == 'surname') {
    $("#surname_alert").fadeIn("fast").effect("shake", {times:1}, 600);
    $("#surname_note").html('<strong>ERROR</strong>: Your surname must be in the range of 2 to 20 characters long.'); 
} else if (data == 'namesurname') {
    $("#name_alert").fadeIn("fast").effect("shake", {times:1}, 600);
    $("#name_note").html('<strong>ERROR</strong>: Your first name must be in the range of 2 to 20 characters long.');
    $("#surname_alert").fadeIn("fast").effect("shake", {times:1}, 600);
    $("#surname_note").html('<strong>ERROR</strong>: Your surname must be in the range of 2 to 20 characters long.');
} else { 
    $("#name_alert").fadeOut("fast");
    $("#note").html('<strong>PERFECT</strong>: You may proceed. Good times.');  
}

如果要检查确切的值，最好使用else if，只有前面的if语句为false时才会执行下一个if语句。这将通过if语句工作，如果它们不完全匹配，它将继续下一个。根据您对该问题的评论，如果姓名和姓氏都不正确，则返回值为“namesurname”，这是第4个if语句。

如果if (data == 'true')的目的是测试是否有返回的数据，您应该将布局更改为：

if (data.length < 0) {
    // If statements to check if data is 'name', 'surname' or 'namesurname'
} else {
    //Data is perfect.
}

这将检查返回的数据是否长度大于0（不是空字符串），然后检查它是否与值匹配。

另一个选择是在表单提交之前检查它，而不是浪费时间将它发送到服务器，当你可以说它是错误的。这可以通过.length函数（简单）或正则表达式来完成（不是那么多，对于像这样的东西，矫枉过正）。

e.g。

if ($('#firstnameInputField').val().length < 2 || $('#firstnameInputField').val().length > 20) {
    // first name is invalid since length is less than 2 or greater than 20
}

这可以存放在您想要实际检查数据时可以调用的事件或函数中。

检查登录表单并使用jquery和php显示错误消息

2 个答案: