0

我正在尝试检查使用 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 根据服务器的输出显示正确的消息。

4

2 回答 2

2

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

服务器端响应示例：

// 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 );
        }
    }
});
于 2013-04-16T11:54:20.953 回答
0

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

  1. 如果返回的数据为“真”。
  2. 如果返回的数据是“名称”。
  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 ifwhich 将执行下一个 if 语句，仅当它之前的语句为 false 时。这将通过 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函数（简单）或正则表达式（不是那么多，对于这样的事情，矫枉过正）来完成。

例如

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

这可以放在一个事件或函数中，只要您想实际检查数据，就可以调用它。

于 2013-04-16T12:33:10.460 回答