Php 使用ajax post实时验证用户名和电子邮件地址_Php_Jquery_Html_Ajax

Php 使用ajax post实时验证用户名和电子邮件地址

php jquery html ajax

Php 使用ajax post实时验证用户名和电子邮件地址,php,jquery,html,ajax,Php,Jquery,Html,Ajax,我设置了一个简单的表单，并使用ajax+jquery检查有效的用户名（在DB中不存在）和电子邮件地址（有效的格式，在DB中不存在），如下所示 <body> <div> <h5> Sign Up </h5> <hr /> <div> Username:<input type="text" size="32" name="membername" id="username"><div id="userna

我设置了一个简单的表单，并使用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>


注册

用户名：

电子邮件：

密码：

注册
函数IsEmailValidAndNew（）
{
（3）w-++以下以下（以下：：：：：：：：：：：：：：...[[[w-+[[[w-++[[[w-+[[[w-++））））））））））第十二（12）号（以下：：：：：：：：：：：：：（（（“[[[[[\w-+\w-++\\10++++以下以下以下以下以下以下）））））））））））））））一（（：：：：：：：：：：：：：：：：：：：：：：：：（（（（（（（（（（（（（（（）（）（）（）（）（）（）（（（（（（（（（（（（（（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（）（：：：：：：：：：：：：：：：：：：：：：：：：：：d]{2}\|
(25[0-5]| 2[0-4]| 1[\d]|{2}{1,2}）{2}}{2}}{（25[0-5]| 2[0-4][\d]| 1[\d]{2}}{1,2}}}}美元);；
var成功=false；
$（“#成员电子邮件”）.change（函数（）
{
var email=$（“#成员电子邮件”）.val（）；
成功=模式测试（电子邮件）；
如果（成功）
{
$（“#usernameStatus”）.html（‘检查电子邮件…’）；
$.ajax(
{
类型：“POST”，
url:“regcheckemail.php”，
数据：“memberemail=“+电子邮件，
成功：功能（msg）
{
$（“#emailStatus”）.ajaxComplete（功能（事件、请求、设置）
{
如果（消息==“确定”）
{
$（“#成员电子邮件”）.removeClass（“对象错误”）；
$（“#成员电子邮件”）.addClass（“对象确定”）；
$（this.html（“”）；
成功=真实；
}
其他的
{
$（“#成员电子邮件”）.removeClass（'object#u ok'）；
$（“#成员电子邮件”）.addClass（“对象错误”）；
$（this.html（msg）；
成功=错误；
}
}
);
}
}
);
}
其他的
{
$（“#emailStatus”）.html（“提供的电子邮件地址格式不正确”）；
$（“#memberemail”）.removeClass（'object#ok'）；//如有必要
$（“#成员电子邮件”）.addClass（“对象错误”）；
成功=错误；
}
}
);
回归成功；
}
函数IsUserAlreadyExist（）
{
var成功=false；
$（“#用户名”）.change（函数（）
{
var usr=$（“#用户名”）.val（）；
如果（usr.长度>=7）
{
$（“#usernameStatus”）.html（‘检查可用性…’）；
$.ajax(
{
类型：“POST”，
url:“regcheckuser.php”，
数据：“用户名=”+usr，
成功：功能（msg）
{
$（“#usernameStatus”）.ajaxComplete（函数（事件、请求、设置）
{
如果（消息==“确定”）
{
$（“#用户名”）.removeClass（“对象#错误”）；
$（“#用户名”）.addClass（“对象#ok”）；
$（this.html（“”）；
成功=真实；
}
其他的
{
$（“#用户名”）.removeClass（'object#ok'）；
$（“#用户名”）.addClass（“对象#错误”）；
$（this.html（msg）；
成功=错误；
}
}
);
}
}
);
}
其他的
{
$（“#usernameStatus”）.html（“用户名应至少包含7个字符”）；
$（“#用户名”）.removeClass（'object#ok'）；
$（“#用户名”）.addClass（“对象#错误”）；
成功=错误；
}
});
回归成功；
}
$（文档）.ready（函数（）
{       
如果（IsEmailValidAndNew（）&&IsUserAlreadyExist（））
{
$（'button'）.find（'signup'）.attr（“disabled”，“false”）；
}
其他的
{
$（'button'）.find（'signup'）.attr（“disabled”，“true”）；
}           
});

我用记事本编码，它不工作，我无法找出错误。我不知道你可能会使用什么好的工具来用javascript编写代码，这些工具有一些很棒的选项，比如嵌入式智能感知和调试功能。

你的代码有几个问题

你的电子邮件regex不够彻底（好吧，这并没有阻止代码工作，但这是我注意到的第一件事）

ajax调用是异步的，这很好，但这意味着执行

$.ajax（）

调用的函数将在收到ajax响应之前完成。您需要重新构造它，以便从ajax成功回调中执行一些操作

您不需要

ajaxComplete（）

函数-此时您已经在ajax成功处理程序中了，所以将代码直接放在包含成功函数的当前

ajaxComplete（）

中

您可以从document ready中调用

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
    });

});

[jquery]相关文章推荐

随机文章推荐