首页 文章

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

提问于
浏览
0

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

2 回答

  • 0

    这是一个如何完成它的例子 . 我试图保持简单:

    服务器端响应示例:

    // 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 );
            }
        }
    });
    
  • 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语句 . 这将完全匹配,它会移动到下一个 . 根据您对该问题的评论,如果姓名和姓氏都不正确,则返回值为"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
    }
    

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

相关问题