使用ajax发布实时验证用户名和电子邮件地址 - php

我设置了一个简单的表单,并使用ajax + jquery来检查有效的用户名(在DB中不存在)和电子邮件地址(有效格式,在DB中不存在),如下所示

<body>
<div>
<h5> Sign Up </h5>
<hr />
<div>
    Username:<input type="text" size="32" name="membername" id="username"><div id="usernameStatus"></div><br />
    Email:<input type="text" size="32" name="memberemail" id="memberemail"><div id="emailStatus"></div><br/>
    Password:<input type="password" size="32" name="memberpwd"><br />
    <button id="signup"  disabled="true">Sign Up</button>   
</div>  
<script>    
    function IsEmailValidAndNew()
    {
         var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|

[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i);
        var success=false;
        $("#memberemail").change(function()
        {
            var email=$("#memberemail").val();
            success=patter.test(email);
            if(success)
            {
                $("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking email...');
                $.ajax(
                {
                    type: "POST",
                    url:"regcheckemail.php",
                    data:"memberemail="+email,  
                    success: function(msg)
                    {
                        $("#emailStatus").ajaxComplete(function(event, request, settings)
                        {
                            if(msg=="OK")
                            {
                                $("#memberemail").removeClass("object_error");
                                $("#memberemail").addClass("object_ok");
                                $(this).html('<img align="absmiddle" src="checkmark.png"/>');
                                success=true;
                            }
                            else
                            {
                                $("#memberemail").removeClass('object_ok'); 
                                $("#memberemail").addClass("object_error");
                                $(this).html(msg);
                                success=false;
                            }
                        }
                        );
                    }
                }
                );
            }
            else
            {
                $("#emailStatus").html("Provided email address is ill-formed");
                $("#memberemail").removeClass('object_ok'); // if necessary
                $("#memberemail").addClass("object_error");
                success=false;
            }
        }
        );
        return success;
    }

    function IsUserAlreadyExist()
    {
        var success=false;
        $("#username").change(function()
        {
            var usr=$("#username").val();
            if(usr.length>=7)
            {
                $("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking availability...');
                $.ajax(
                {
                    type: "POST",
                    url:"regcheckuser.php",
                    data:"username="+usr,   
                    success: function(msg)
                    {
                        $("#usernameStatus").ajaxComplete(function(event, request, settings)
                        {
                            if(msg=="OK")
                            {
                                $("#username").removeClass("object_error");
                                $("#username").addClass("object_ok");
                                $(this).html('<img align="absmiddle" src="checkmark.png"/>');
                                success=true;
                            }
                            else
                            {
                                $("#username").removeClass('object_ok'); 
                                $("#username").addClass("object_error");
                                $(this).html(msg);
                                success=false;
                            }
                        }
                        );
                    }
                }
                );
            }
            else
            {
                $("#usernameStatus").html("The username should have at least 7 characters");
                $("#username").removeClass('object_ok'); 
                $("#username").addClass("object_error");
                success=false;
            }
        });
        return success;
    }
    $(document).ready(function()
    {       
        if(IsEmailValidAndNew() && IsUserAlreadyExist())
        {
            $('button').find("#signup").attr("disabled","false");
        }
        else
        {
            $('button').find("#signup").attr("disabled","true");    
        }           
    });
</script>
</div>
</body>

我使用记事本对其进行编码,但无法正常工作,而且我也无法找出错误。我不知道您可能会使用任何出色的工具在javascript中进行编码,这些工具具有出色的选项,例如嵌入式智能感知和调试功能。

参考方案

您的代码有几个问题。

您的电子邮件正则表达式不够彻底(好的,这实际上并没有停止代码的工作,但这是我注意到的第一件事)。
您的ajax调用是异步的,这很好,但是这意味着执行$.ajax()调用的功能将在收到ajax响应之前完成。您需要对其进行重组,以通过ajax成功回调进行操作。
您不需要ajaxComplete()函数-那时您已经在ajax成功处理程序中,因此可以将当前ajaxComplete()中的代码直接放在包含成功函数中。
您已经准备好从文档中调用一次IsEmailValidAndNew()IsUserAlreadyExist()并禁用或启用“注册”控件,但是此后再也不能重新启用或禁用它。您在调用这些函数时就好像它们将验证字段一样,但是实际上它们是在字段上设置了更改处理程序,因此函数中的代码在用户实际更改字段之前不会执行任何操作。

以下是一种代替的结构代码的方法:

$(document).ready(function() {
    var emailOK = false,
        nameOK = false;

    function setSubmitEnabling() {
       $("#signup").prop("disabled", !(emailOK && nameOK));
    }

    setSubmitEnabling();

    $("#username").change(function() {
       var usr = $(this).val();
       if (usr.length < 7) {
           $("#usernameStatus").html("The username should have at least 7 characters");
           $(this).removeClass('object_ok').addClass("object_error");
           nameOK = false;
           setSubmitEnabling();
       } else {
           // format seems OK, so do ajax call:
           $("#usernameStatus").html('<img align="absmiddle" src="loading.gif"/> Checking availability...');
           $.ajax({
               type: "POST",
               url:"regcheckuser.php",
               data:"username="+usr,
               success : function(msg) {
                  if(msg === "OK")
                  {
                      $("#username").removeClass("object_error")
                                    .addClass("object_ok");
                      $("#usernameStatus").html('<img align="absmiddle" src="checkmark.png"/>');

                      nameOK = true;
                  }
                  else
                  {
                      $("#username").removeClass('object_ok')
                                    .addClass("object_error");
                      $("#usernameStatus").html(msg);

                      nameOK = false;
                  }
                  // now update button state
                  setSubmitEnabling();
               }
           });
       }
    });

    $("#memberemail").change(function() {
       // basically the same thing as for the username field as shown above,
       // except setting emailOK instead of nameOK, so I suggest you get the
       // username part working first then come back to do this the same way
    });

});

上面的代码的想法是,您需要在几个地方启用或禁用“注册”按钮,这取决于两个不相关的条件。因此,为每个条件创建一个标志,然后使用功能setSubmitEnabling()来检查标志并启用或禁用按钮。当页面加载时立即调用该函数以设置初始启用/禁用状态,并在需要进行重新评估的任何更改发生时再次调用它。

另外,为两个字段中的每个字段创建一个更改处理程序。更改处理程序将彼此相似,基本上是进行一些初步的快速验证,以查看长度和格式是否正确以及是否可以通过ajax调用来测试唯一性。

代码未在服务器目录php中创建文件 - php

我正在尝试使用以下代码将新文件写入服务器error_reporting(E_ALL); ini_set('display_errors', 1); if($_SERVER['REQUEST_METHOD'] == "POST") { $html = $_POST['html'];…

CodeIgniter更新查询被执行两次 - php

我正在使用CodeIgniter 2.2。每次访问页面时,我都必须用+1更新数据库。代码可以工作,但是每次都会增加+2。示例:如果是total views=2,则在单击页面后total views应该是3,但是数据库中的值是4。我确定我在控制器中仅调用一次模型add_one_to_view_image。控制者 function view(){ $view_i…

故障排除“警告:session_start():无法发送会话高速缓存限制器-标头已发送” - php

我收到警告:session_start()[function.session-start]:无法发送会话缓存限制器-标头已发送(错误输出开始如果我将表单数据提交到其他文件进行处理,则可以正常工作。但是,如果我将表单数据提交到同一页面,则会出现此错误。请建议<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0…

通过php表单修改我的xml文件 - php

这是我的xml文件和下面的php代码。我输入了一个输入类型,它将按名字搜索学生。然后将显示有关特定学生的信息,并且将显示另一个按钮更新。问题是我想在那之后修改信息。如何通过标签名称获取元素,以便可以修改有关特定学生的信息?<students> <student> <firstname>John</firstname&…

在ajax之后将页面内容复制到同一页面 - php

我有简单的注册公式,我希望首先使用ajax发送,而不刷新页面以控制是否插入正确的数据,然后仅重定向到其他页面。问题是,当我通过ajax将其发送到同一页面后,一切正常,但是页面内容重复,我可以看到两次...这是我的ajaxfunction registruj () { var name = $('#meno').val(); var pri…