在PHP和JavaScript中验证表单_Javascript_Php_Html

在PHP和JavaScript中验证表单

javascript php html

在PHP和JavaScript中验证表单,javascript,php,html,Javascript,Php,Html,我正在创建一个简单的注册表单pageregister.html：名字、姓氏、电子邮件、用户名、密码、确认密码。我将其设置为在JavaScript中验证输入客户端，如果通过，则转到register.php，它将在确保数据安全并将其添加到数据库之前验证后端的数据。所有这些都很好但是，如果后端的验证失败，则会出现问题。我不希望客户机丢失他们输入的所有信息，并且不得不重新执行，但是由于它已经加载了register.php，所有表单数据现在都位于php脚本中，但位于新页面上。我不知道如何处理这个问题。我

我正在创建一个简单的注册表单pageregister.html：名字、姓氏、电子邮件、用户名、密码、确认密码。我将其设置为在JavaScript中验证输入客户端，如果通过，则转到register.php，它将在确保数据安全并将其添加到数据库之前验证后端的数据。所有这些都很好

但是，如果后端的验证失败，则会出现问题。我不希望客户机丢失他们输入的所有信息，并且不得不重新执行，但是由于它已经加载了register.php，所有表单数据现在都位于php脚本中，但位于新页面上。我不知道如何处理这个问题。我可以在register.php页面上创建一个重复的表单，如果表单在后端失败，可以使用php脚本重新填充表单。但是，如果我要这样做，我也可以将PHP代码放入register.html并以这种方式运行它。但是，当我将action=register.html更改为action=并将PHP代码放在其中时，什么也没有发生。我四处搜索并查看了isset，但它似乎也没有运行，HTML页面只是重新加载并清除所有字段，我甚至没有看到任何回声或任何东西

    <!DOCTYPE HTML>
<html>
    <head>
        <title>Family Beacon Registration</title>
        <style>
            .required {color: #FF0000;}
            .error {color: #FF0000;}
        </style>
        <script type="text/javascript">
            function validate()
            {
                var hasErrors = false;

                var first_name = document.forms["registration_form"]["first_name"].value;
                if(first_name == "")
                {
                    document.getElementById("first_name_error").innerHTML = "* First Name is a required field";
                    hasErrors = true;
                }
                else
                    document.getElementById("first_name_error").innerHTML = "*";

                var last_name = document.forms["registration_form"]["last_name"].value;
                if(last_name == "")
                {
                    document.getElementById("last_name_error").innerHTML = "* Last Name is a required field";
                    hasErrors = true;
                }
                else
                    document.getElementById("last_name_error").innerHTML = "*";

                var email = document.forms["registration_form"]["email"].value;
                if(email == "")
                {
                    document.getElementById("email_error").innerHTML = "* Email is a required field";
                    hasErrors = true;
                }
                else if(email.length > 40)
                {
                    document.getElementById("email_error").innerHTML = "* Email must be less than 40 characters in length.";
                    hasErrors = true;
                }
                else if(email.indexOf("@") == -1)
                {
                    document.getElementById("email_error").innerHTML = "* A valid e-mail address is required";
                    hasErrors = true;
                }
                else
                    document.getElementById("email_error").innerHTML = "*";

                var username = document.forms["registration_form"]["username"].value;
                if(username == "")
                {
                    document.getElementById("username_error").innerHTML = "* Username is a required field";
                    hasErrors = true;
                }
                else if(username.length < 3 || username.length > 20)
                {
                    document.getElementById("username_error").innerHTML = "* Username must be between 3 and 20 characters in length";
                    hasErrors = true;
                }
                else
                    document.getElementById("username_error").innerHTML = "*";

                var password = document.forms["registration_form"]["password"].value;
                if(password == "")
                {
                    document.getElementById("password_error").innerHTML = "* Password is a required field";
                    hasErrors = true;
                }
                else if(password.length < 8 || password.length > 20)
                {
                    document.getElementById("password_error").innerHTML = "* Passwords must be between 8 and 20 characters in length";
                    hasErrors = true;
                }
                else
                    document.getElementById("password_error").innerHTML = "*";

                var confirm_password = document.forms["registration_form"]["confirm_password"].value;
                if(confirm_password == "")
                {
                    document.getElementById("confirm_password_error").innerHTML = "* Confirm Password is a required field";
                    hasErrors = true;
                }
                else if(confirm_password != password)
                {
                    document.getElementById("confirm_password_error").innerHTML = "* Passwords do not match";
                    document.getElementById("password_error").innerHTML = "* Passwords do not match";
                    hasErrors = true;
                }
                else
                    document.getElementById("confirm_password_error").innerHTML = "*";

                return !hasErrors;
            }
        </script>
    </head>
    <body>  
        <h2>Family Beacon Registration</h2>
        <p><span class="required" id="required">* required field</span></p>
        <form name="registration_form" action="register.php" onsubmit="return validate();" method="post">
            First Name:<input type="text" name="first_name" id="first_name" />
            <span class="error" id="first_name_error">* </span><br><br>
            Last Name:<input type="text" name="last_name" id="last_name" />
            <span class="error" id="last_name_error">* </span><br><br>
            E-Mail:<input type="text" name="email" id="email" />
            <span class="error" id="email_error">* </span><br><br>
            Username:<input type="text" name="username" id="username" />
            <span class="error" id="username_error">* </span><br><br>
            Password:<input type="password" name="password" id="password" />
            <span class="error" id="password_error">* </span><br><br>
            Confirm Password:<input type="password" name="confirm_password" id="confirm_password" />
            <span class="error" id="confirm_password_error">* </span><br><br>
            <input type="reset" name="reset" value="Reset" />
            <input type="submit" name="submit" value="Register" />
        </form>
    </body>
</html>

我所做的可能对你有用的是：

使用jquery$window.onbeforeunload

比如：

$(window).on("beforeunload", function() { 
    //get all the data from inputs
    //set cookie with JSON.stringify(yourData)
})

然后在身体负荷下：

如果您的cookie存在，JSON.parse并将其放入您的输入中

编辑：如果您需要，我可以提供一些示例代码。此外，在成功提交后，在php中，执行类似unset$_COOKIE['yourcookie']的操作，以便在成功提交后，表单不会保留其输入：

了解AJAX：

AJAX的意思是：异步JavaScript和XML

异步菜单，您将不会重定向到此文件。您将保留在文件中，等待服务器响应。

如果响应是否定的，您可以为用户显示一些信息，如果响应是肯定的，您可以将用户重定向到另一个页面。在响应为肯定之前，您不需要将用户重定向到另一个页面，这样您就可以将数据保存在输入字段中。

首先，您的错误概念之一是将PHP代码放在名为register.HTML的HTML扩展文件中，而该文件永远不会工作。第二件事是这个问题有三种解决方案 -使用AJAX调用 -使用带有表单和代码的自执行PHP文件。 -使用会话，这是我最不喜欢的解决方案

第一种解决方案是将JQuery与AJAX调用结合使用的最佳方法。要做到这一点，只需对如下表单使用一个ID

   <form id="myForm">
    Your Form element goes here...
   </form>

<script type='text/javascript'>
 $(document).ready(function(){
   $("#myForm").submit(function(){
     Your Validation code goes here.If all is ok then ...
     $.post("your_php_file_path.php",$(this)..serializeArray(),function(data){
   //here is the data is the echo you did in that php file
   //like echo "OK",you'll find data is set as string "OK"
     });
   });
});
</script>

<form action='<?php echo $_SERVER["PHP_SELF"] ?>' method='post'>
Your Form element like this
<input type='text' name='username' value='<?php echo isset($_POST['username'])?$_POST['username']:"" ?>'
</form>

<?php
if(count($_POST)){
//Your PHP code for validation and database insert
if(your_error_condition_occur){
   $Error = "Error Message";
  }
}
?>

然后像这样使用jquery

   <form id="myForm">
    Your Form element goes here...
   </form>

<script type='text/javascript'>
 $(document).ready(function(){
   $("#myForm").submit(function(){
     Your Validation code goes here.If all is ok then ...
     $.post("your_php_file_path.php",$(this)..serializeArray(),function(data){
   //here is the data is the echo you did in that php file
   //like echo "OK",you'll find data is set as string "OK"
     });
   });
});
</script>

<form action='<?php echo $_SERVER["PHP_SELF"] ?>' method='post'>
Your Form element like this
<input type='text' name='username' value='<?php echo isset($_POST['username'])?$_POST['username']:"" ?>'
</form>

<?php
if(count($_POST)){
//Your PHP code for validation and database insert
if(your_error_condition_occur){
   $Error = "Error Message";
  }
}
?>

第二个是相同的PHP页面，表单的工作方式如下

   <form id="myForm">
    Your Form element goes here...
   </form>

<script type='text/javascript'>
 $(document).ready(function(){
   $("#myForm").submit(function(){
     Your Validation code goes here.If all is ok then ...
     $.post("your_php_file_path.php",$(this)..serializeArray(),function(data){
   //here is the data is the echo you did in that php file
   //like echo "OK",you'll find data is set as string "OK"
     });
   });
});
</script>

<form action='<?php echo $_SERVER["PHP_SELF"] ?>' method='post'>
Your Form element like this
<input type='text' name='username' value='<?php echo isset($_POST['username'])?$_POST['username']:"" ?>'
</form>

<?php
if(count($_POST)){
//Your PHP code for validation and database insert
if(your_error_condition_occur){
   $Error = "Error Message";
  }
}
?>

在页面的最顶端使用php

<?php
if(count($_POST)){
//Your PHP code for validation and database insert
}
?>

这样，您就可以像这样轻松地处理错误

   <form id="myForm">
    Your Form element goes here...
   </form>

<script type='text/javascript'>
 $(document).ready(function(){
   $("#myForm").submit(function(){
     Your Validation code goes here.If all is ok then ...
     $.post("your_php_file_path.php",$(this)..serializeArray(),function(data){
   //here is the data is the echo you did in that php file
   //like echo "OK",you'll find data is set as string "OK"
     });
   });
});
</script>

<form action='<?php echo $_SERVER["PHP_SELF"] ?>' method='post'>
Your Form element like this
<input type='text' name='username' value='<?php echo isset($_POST['username'])?$_POST['username']:"" ?>'
</form>

<?php
if(count($_POST)){
//Your PHP code for validation and database insert
if(your_error_condition_occur){
   $Error = "Error Message";
  }
}
?>

在HTML部分使用

 <?php
  if(isset($Error)){
   echo $Error;
   }
 ?>

您可以使用session进行页到页的数据传输，而不会丢失它们，但通常session用于登录验证，所以我说不要使用它。

我建议使用Ajax调用和javascript，甚至更简单地使用jQuery，如果您加载了它，您可以这样做：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Family Beacon Registration</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <style>
            .required {color: #FF0000;}
            .error {color: #FF0000;}
        </style>
    </head>
    <body>  
        <h2>Family Beacon Registration</h2>
        <p><span class="required" id="required">* required field</span></p>
        <div id="form">
            First Name:<input type="text" name="first_name" id="first_name" />
            <span class="error" id="first_name_error">* </span><br><br>
            Last Name:<input type="text" name="last_name" id="last_name" />
            <span class="error" id="last_name_error">* </span><br><br>
            E-Mail:<input type="text" name="email" id="email" />
            <span class="error" id="email_error">* </span><br><br>
            Username:<input type="text" name="username" id="username" />
            <span class="error" id="username_error">* </span><br><br>
            Password:<input type="password" name="password" id="password" />
            <span class="error" id="password_error">* </span><br><br>
            Confirm Password:<input type="password" name="confirm_password" id="confirm_password" />
            <span class="error" id="confirm_password_error">* </span><br><br>
            <input type="reset" name="reset" value="Reset" />
            <input id="formSubmit" type="submit" name="submit" value="Register" />
        </div>
        <script>
            $(function() {
                $("#formSubmit").click(function() {
                    var hasErrors = false,
                        first_name = document.forms["registration_form"]["first_name"].value,
                        last_name = document.forms["registration_form"]["last_name"].value,
                        email = document.forms["registration_form"]["email"].value,
                        username = document.forms["registration_form"]["username"].value,
                        password = document.forms["registration_form"]["password"].value,
                        confirm_password = document.forms["registration_form"]["confirm_password"].value;
                    if(first_name == "") {
                        document.getElementById("first_name_error").innerHTML = "* First Name is a required field";
                        hasErrors = true;
                    } else {
                        document.getElementById("first_name_error").innerHTML = "*";
                    }
                    if(last_name == "") {
                        document.getElementById("last_name_error").innerHTML = "* Last Name is a required field";
                        hasErrors = true;
                    } else {
                        document.getElementById("last_name_error").innerHTML = "*";
                    }
                    if(email == "") {
                        document.getElementById("email_error").innerHTML = "* Email is a required field";
                        hasErrors = true;
                    } else if(email.length > 40) {
                        document.getElementById("email_error").innerHTML = "* Email must be less than 40 characters in length.";
                        hasErrors = true;
                    } else if(email.indexOf("@") == -1) {
                        document.getElementById("email_error").innerHTML = "* A valid e-mail address is required";
                        hasErrors = true;
                    } else {
                        document.getElementById("email_error").innerHTML = "*";
                    }
                    if(username == "") {
                        document.getElementById("username_error").innerHTML = "* Username is a required field";
                        hasErrors = true;
                    } else if(username.length < 3 || username.length > 20) {
                        document.getElementById("username_error").innerHTML = "* Username must be between 3 and 20 characters in length";
                        hasErrors = true;
                    } else {
                        document.getElementById("username_error").innerHTML = "*";
                    }
                    if(password == "") {
                        document.getElementById("password_error").innerHTML = "* Password is a required field";
                        hasErrors = true;
                    } else if(password.length < 8 || password.length > 20) {
                        document.getElementById("password_error").innerHTML = "* Passwords must be between 8 and 20 characters in length";
                        hasErrors = true;
                    } else {
                        document.getElementById("password_error").innerHTML = "*";
                    }
                    if(confirm_password == "") {
                        document.getElementById("confirm_password_error").innerHTML = "* Confirm Password is a required field";
                        hasErrors = true;
                    } else if(confirm_password != password) {
                        document.getElementById("confirm_password_error").innerHTML = "* Passwords do not match";
                        document.getElementById("password_error").innerHTML = "* Passwords do not match";
                        hasErrors = true;
                    } else {
                        document.getElementById("confirm_password_error").innerHTML = "*";
                    }

                    if(!hasErrors) {
                        $.post( "register.php", {
                            first_name: first_name,
                            last_name: last_name,
                            email: email,
                            username: username,
                            password: password,
                            confirm_password: confirm_password
                        })
                        .done(function(data) {
                            // Data is the PHP echoed output.
                            alert(data);
                        })
                        .fail(function() {
                            alert( "error" );
                        });
                    }
                });
            });
        </script>
    </body>
</html>

通过AXJAX请求将数据发送到.php，而不是正常的表单提交。那么表单字段将不会清空。如果服务器端验证失败，您能否将用户发送回上一页，然后还发送一个有效负载和他们的表单数据？您可以使用JS根据有效负载填充所有输入。