使用php和javascript进行ajax表单验证_Javascript_Php_Ajax

使用php和javascript进行ajax表单验证

javascript php ajax

使用php和javascript进行ajax表单验证,javascript,php,ajax,Javascript,Php,Ajax,我正在开发一个简单的表单，并通过javascript、php和AJAX对其进行验证以下是仅用于密码的html表单片段： Password: <input type="password" name="password" id="password" onblur="checkUserInputs('password')" <span id="password-warning"></span> <input type="bu

我正在开发一个简单的表单，并通过javascript、php和AJAX对其进行验证

以下是仅用于密码的html表单片段：

Password:
<input type="password" name="password" id="password"
            onblur="checkUserInputs('password')"
        <span id="password-warning"></span>
<input type="button" name="signup" id="signup" 
            value ="Sign Up" class="button signup-button" 
                    onclick="signUp()">
            <span id="status-field"></span>

单击“注册”按钮时，将激发SignUp（）：

function signUp(){
    var password = document.getElementById("password").value;
    //rest of the code to get other inputs values...
    //status div to display errors
    var statusDiv = document.getElementById("status-field");    
    if(password !="")//I have other checks too, just shortened the code here {
        //setup ajax
        var ajax = createAjax("POST", "core/proccess_signup.php");
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
        ajax.onreadystatechange = function(){
            if(ajaxReady(ajax)){

                if(ajax.responseText == "success"){ //registartion was successful
                    document.getElementById("signup-form").innerHTML = 
                      "Registration was successful";
                }else{
                    statusDiv.innerHTML = "Please check the error massages";
                }       
            }
        }
        //send all of the data to php scripts for validation            ajax.send("functionToCall=signup&username="+username+"&password="+password);
    }else{
        statusDiv.innerHTML = "Please fill out all of the form data";
        return;
    }    
}

在php中验证数据：

$functionToCall = $_REQUEST['functionToCall'];
if($functionToCall == "check_password"){
    check_password();
}else if($functionToCall == "signup"){
   check_password();    
   signup();
}
function check_password(){
    if(isset($_POST['checkPassword'])) {
        $pass = $_POST['checkPassword'];
        if(strlen($pass)< 6 || strlen($pass) > 20){
            echo 'password must be min 6 and max 20 characters';
            exit();
        } 
        if(preg_match("/\s/", $pass)) {
            echo 'Password can not be empty or contain spaces';
            exit();
        }
        echo '';
        return true; //if all is good return true so i can check if password validation passed successfully
    }
}

如果密码输入正确，没有空格，长度在6-20之间，

check\u password（）

应该设置为true，并且应该执行echo'success'，但是没有。这让我抓狂

为什么echo“成功”永远不会被执行？查看代码并告诉我我做错了什么。

我看到的主要问题是check\u password函数查找isset（$\u POST['checkPassword']）

第二个ajax请求再次调用该函数，该请求不发布该值。它发布密码

如果您还没有使用xdebug，我强烈建议您使用xdebug。当你经历这种事情时，它真的很有帮助

这里有一个快速修复弹出检查密码功能

    if(isset($_POST['checkPassword']) || isset($_POST['password']) ) {
    $pass = (isset($_POST['checkPassword']) ) ? $_POST['checkPassword'] : $_POST['password'];

还可以调用check_password函数两次。最好将其返回值存储为变量，然后作为参数传递

第一个电话

if($functionToCall == "signup"){
check_password();    
signup();

第二次调用（在注册函数中）

我不得不对js进行一些修改，以使其正常工作，但我猜这只是为了简单起见对代码进行简化时的一些失误。变化：

Ajax请求不起作用，因此已编辑

用户名变量未设置，因此硬编码为foobar

这是完整的html页面

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="ISO-8859-1">
        <title>TEST</title>

        <script>

        function checkUserInputs(inputId){


            var inputField = document.getElementById("password").value;
            var varName = "checkPassword"; 
            var functionToCall = "check_password";
            var warningDiv = document.getElementById("password-warning");

        if( inputField != ""){

                var params = varName + "=" + inputField + "&functionToCall=" + functionToCall;
                var xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        warningDiv.innerHTML = xmlhttp.responseText; 
                    }
                  }

                xmlhttp.open("POST","core/proccess_signup.php",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send( params );
            }   
        }

        function signUp(){


            var password = document.getElementById("password").value;
            //rest of the code to get other inputs values...
            //status div to display errors
            var statusDiv = document.getElementById("status-field");    
            if(password !=""){ //I have other checks too, just shortened the code here 

                var xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        if( xmlhttp.responseText == "success"){ // registration was successful
                            statusDiv.innerHTML = "Registration was successful";
                        }
                        else{
                            statusDiv.innerHTML = "Please check the error messages";
                        }
                    }
                  }

                xmlhttp.open("POST","core/proccess_signup.php",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send("functionToCall=signup&username=foobar&password="+password);
            }
            else
            {
                statusDiv.innerHTML = "Please fill out all of the form data";
                return;
            }    
        }


        </script>

        </head>
        <body>


        <input type="password" name="password" id="password" onblur="checkUserInputs('password')" />
                <span id="password-warning"></span>
        <input type="button" name="signup" id="signup" value ="Sign Up" class="button signup-button" onclick="signUp()" />
                    <span id="status-field"></span>
        </body>
        </html>


试验
函数checkUserInputs（inputId）{
var inputField=document.getElementById（“密码”）.value；
var varName=“checkPassword”；
var functionToCall=“检查密码”；
var warningDiv=document.getElementById（“密码警告”）；
如果（输入字段！=“”）{
var params=varName+“=”+inputField+“&functionToCall=“+functionToCall；
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
warningDiv.innerHTML=xmlhttp.responseText；
}
}
open（“POST”，“core/process_signup.php”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xmlhttp.send（params）；
}   
}
函数注册（）{
var password=document.getElementById（“密码”）.value；
//代码的其余部分以获取其他输入值。。。
//状态div以显示错误
var statusDiv=document.getElementById（“状态字段”）；
如果（password！=“”）{//我还有其他检查，请在这里缩短代码
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
如果（xmlhttp.responseText==“success”）{//注册成功
statusDiv.innerHTML=“注册成功”；
}
否则{
statusDiv.innerHTML=“请检查错误消息”；
}
}
}
open（“POST”，“core/process_signup.php”，true）；
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xmlhttp.send（“functionToCall=signup&username=foobar&password=“+password”）；
}
其他的
{
statusDiv.innerHTML=“请填写所有表单数据”；
返回；
}    
}

这是php（我没有去掉重复的函数调用）

如果（preg_match（'/\s/'，$pass））

，您确定它不应该是

？此外，此正则表达式不检查字符串是否为空。要做到这一点，您可以尝试使用if（preg_match（'/\s^$/'，$pass））。现在，谢谢，我修好了，谢谢！我将根据您的评论重新检查并修复我的代码
if($functionToCall == "signup"){
check_password();    
signup();

        if(check_password()){
        echo 'success';
        exit();
    }

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="ISO-8859-1">
        <title>TEST</title>

        <script>

        function checkUserInputs(inputId){


            var inputField = document.getElementById("password").value;
            var varName = "checkPassword"; 
            var functionToCall = "check_password";
            var warningDiv = document.getElementById("password-warning");

        if( inputField != ""){

                var params = varName + "=" + inputField + "&functionToCall=" + functionToCall;
                var xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        warningDiv.innerHTML = xmlhttp.responseText; 
                    }
                  }

                xmlhttp.open("POST","core/proccess_signup.php",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send( params );
            }   
        }

        function signUp(){


            var password = document.getElementById("password").value;
            //rest of the code to get other inputs values...
            //status div to display errors
            var statusDiv = document.getElementById("status-field");    
            if(password !=""){ //I have other checks too, just shortened the code here 

                var xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function()
                  {
                  if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        if( xmlhttp.responseText == "success"){ // registration was successful
                            statusDiv.innerHTML = "Registration was successful";
                        }
                        else{
                            statusDiv.innerHTML = "Please check the error messages";
                        }
                    }
                  }

                xmlhttp.open("POST","core/proccess_signup.php",true);
                xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xmlhttp.send("functionToCall=signup&username=foobar&password="+password);
            }
            else
            {
                statusDiv.innerHTML = "Please fill out all of the form data";
                return;
            }    
        }


        </script>

        </head>
        <body>


        <input type="password" name="password" id="password" onblur="checkUserInputs('password')" />
                <span id="password-warning"></span>
        <input type="button" name="signup" id="signup" value ="Sign Up" class="button signup-button" onclick="signUp()" />
                    <span id="status-field"></span>
        </body>
        </html>

            <?php
        $functionToCall = $_REQUEST['functionToCall'];
        if($functionToCall == "check_password"){
            check_password();
        }else if($functionToCall == "signup"){
            check_password();
            signup();
        }

        function check_password(){

            if(isset($_POST['checkPassword']) || isset($_POST['password']) ) {
                $pass = (isset($_POST['checkPassword']) ) ? $_POST['checkPassword'] : $_POST['password'];

                if(strlen($pass)< 6 || strlen($pass) > 20){
                    echo 'password must be min 6 and max 20 characters';
                    exit();
                }
                if(preg_match("/\s/", $pass)) {
                    echo 'Password can not be empty or contain spaces';
                    exit();
                }
                echo '';
                return true; //if all is good return true so i can check if password validation passed successfully
            }
        }

        function signup(){


            if(isset($_POST['username'])) {
                //here I check just the password
                if(check_password()){
                    echo 'success';
                    exit();
                }
            }
        }