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

Question

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

问题是，当两者都没有输入时，回调返回的消息名和姓一起返回，而没有显示错误消息。

        // 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.');  
                                    }  
                              }  
                        });
            });
        });

服务器端代码检查表单中的字段是否为空，并回显相应的消息，如名字或姓氏。之后，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”，则返回

1. 。如果返回的数据是“name”，则返回
2. 。如果返回的数据是"surname“，则返回
3. ，并使用else语句说明数据是完美的。

这些方法的问题是:不检查是否同时返回了姓氏和姓名。其次，返回数据是否完美的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语句中工作，如果它们不完全匹配，它将进入下一个语句。根据您对问题的评论，如果name和surname都不正确，则返回值为"namesurname“，这是第四个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函数(简单)或正则表达式(不是很多，对于这种情况，可以使用overkill)来完成。

例如：

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

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