相同页面验证

Question

这可能是一个宽泛的答案，但我会尽量缩短。我想做的是使用表单从用户那里获取一些信息，并使用JavaScript“验证表单”。如果验证成功，则提交表单。一旦发生这种情况，我将尝试使用Java脚本检索输入到表单的数据并显示在同一页面上。（使用模式）

尽管我认为我背后的逻辑是错误的。表单验证后即可提交吗？一旦提交页面刷新？因此输入数据丢失了吗？这可能是为什么我在模态中不断获取空的空值的原因吗？

在此处获取表单的html

<div class="feedback-background">
<div class="feedback-content">
    <div class="close">+</div>
    <img src="../Images/Images2/feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">

    <form name="FeedbackForm" action="/action_page.php" onsubmit="return validateForm();displayContent();"
          method="get">
        Name:
        <input id="Name" name="Name" type="text" placeholder="Name">
        E-Mail:
        <input id="E-mail" name="E-mail" type="email" placeholder="E-mail">
        What do you think about us?<br>
        <textarea id="comment" rows="6" cols="33" name="comment"></textarea>
        <br>
        How would you rate us ?
        <br>

        <label><input type="radio" name="rating" id="rating1" value="Excellent" checked>Excellent</label>
        <label><input type="radio" name="rating" id="rating2" value="Very Good">Very Good</label>
        <label><input type="radio" name="rating" id="rating3" value="Average">Average</label>
        <label><input type="radio" name="rating" id="rating4" value="Poor">Poor</label>
        <label><input type="radio" name="rating" id="rating5" value="Extreamly Poor">Extremely Poor</label>
        <input type="submit" id="submit" value="Submit">
    </form>
</div>

这是模式的HTML，输入数据将再次显示给客户

<div class="popup">
    <div class="popuptext" id="myPopup"><p>Thank you <span id="username"></span> ,<br>Your feedback has been
        recorded.<br>
        <br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span
                id="userrating"></span>".
        <br><br>Thank you
        for taking your time to do so.<br><br>You will now be re-directed automatically</p>
    </div>
</div>

这是我用于表格的css

/*----------comment form----------*/

.feedback-background{
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 position: absolute;
 top: 0px;
 display: flex;
 align-items: center;
 justify-content: center;
 display:none;
 }
 .feedback-content{
  width: 500px;
  height: 550px;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  position:relative;


  }
 #submit{text-transform:uppercase;
 padding:6px 2px;
 margin-right: 40px;
 margin-top: 20px;

 background: #ee0c6e;
 font-weight:600;
 color:white;
 border-radius: 3px; 
 font-size: 10px;
 min-width: 100px;
 text-decoration:none
 }

 input {
 width: 50%;
 display: block;
 margin: 10px 0px;

   }

   label {
   display: block;
  }

 input[type="radio"]{
 width: auto;
 display: inline;
  }
 input[type="submit"]{
 width:10em;height: 2em;
 cursor:pointer;

 }
.close{
position:absolute;
top:0px;
right:14px;
transform:rotate(45deg);
font-size:42px;
cursor:pointer;
 }
#feedbacksubmit{
margin-left:600px;
margin-bottom:50px;
background-color:#484848;
border-radius:14px;
padding:10px;
cursor:pointer;
color:white;
outline:none;
}

这是我用于弹出模式的CSS

/*-----popup----*/
.popup{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display:none;

 }
.popuptext{
  width: 100px;
 height: 350px;
 background-color: #000025;
 border-radius: 4px;
 padding: 20px;
 position:relative;
 color:#fff;
 width: 20%;
 height:30%;
 display: block;
 margin: 10px 0px;
 text-align:center;
 margin-left:0px;
 margin-bottom:80px;
 }

 #logo{

margin-right:100px;
float:left;
}

这是我使用过的JavaScript。

/*------comments form-----*/

document.getElementById('feedbacksubmit').addEventListener('click',
    function () {
        document.querySelector('.feedback-background').style.display = 'flex';
    }
)


document.querySelector('.close').addEventListener('click',
    function () {
        document.querySelector('.feedback-background').style.display = 'none';
    }
)


function displayContent() {
    var name = document.getElementById("Name").value;
    var comment = document.getElementById("comment").value;

    var ratings = document.getElementById('rating');
    var rate_value;
    for (var i = 0; i < rating.length; i++) {
        if (rating[i].checked) {
            rate_value = rating[i].value;
        }
    }

    /*these lines are used to write the details into the new modal*/
    document.getElementById("username").textContent = name;
    document.getElementById("usercomment").textContent = comment;
    document.getElementById("userrating").innerHTML = rate_value;

    return "";
}


function closePopup() {

    document.querySelector('.popup').style.display = 'none';
}

/*-------validation-----*/
function validateForm() {
    var x = document.forms["FeedbackForm"]["Name"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
    var z = document.forms["FeedbackForm"]["E-mail"].value;
    if (z == "") {
        alert("Please enter your E-mail address to proceed");
        return false;
    }
    var y = document.forms["FeedbackForm"]["comment"].value;
    if (y == "") {
        alert("Comment section can not be empty");
        return false;
    }

    var a = 0, rdbtn = document.getElementsByName("rating")
    for (i = 0; i < rdbtn.length; i++) {
        if (rdbtn.item(i).checked == false) {
            a++;
        }
    }
    if (a == rdbtn.length) {
        alert("Please select a rating according to you");
        return false;
    }


    document.getElementById('submit').addEventListener('click',
        function () {
            document.querySelector('.feedback-background').style.display = 'none';
            document.querySelector('.popup').style.display = 'flex';
        }
    )
}

有更好的方法吗？我该怎么做呢？我做错了什么

Answer 1

在不仔细查看代码的情况下，这里要求您对提交表单时发生的事情以及如何验证表单进行“概述”概述。

首先，是表单以及提交表单时发生的事情。

单击提交按钮时，表单数据将发送到表单标签上指定的文件-在您的情况下为“ /action_page.php”。到达的地方有许多变量（又名“键-值对”-但它们是具有名称和值的变量）。请注意，“变量名称”是在（例如）输入字段的name=属性中指定的名称，“变量内容”是在（例如）输入字段中键入的内容。

您的后端PHP文件将需要使用$ _POST或$ _GET命令为每个项目创建适当的PHP $变量，具体取决于您在form标记的“ method =”属性中使用的方法。例如，您的表单具有一个名为name=comment的textarea元素。在PHP方面，您可以编写：

$cmt = $_GET['comment'];

然后保存！您在PHP变量$ cmt中有用户的注释。

您可以在此阶段进行验证，也可以在甚至提交文件之前验证javascript中的代码（请注意，javascript可以拦截表单提交过程并将其停止或继续。

然后，您的PHP文件可以将用户发送回同一页面（在这种情况下，您需要在顶部使用<? php>部分来处理该页面），也可以将其完全转到另一页面。

重要说明：

重要提示：在PHP文件的指定action=位置，您可能会遇到一些麻烦，因为您以斜杠开头。这会将操作系统发回到文件系统的根目录以查找您的文件，而这可能不是您想要的。现在，将"action_page.php"文件与index.php文件放在相同的位置，并放一个斜杠。
在开始时，请勿使用相同的PHP文件来接收用于向用户显示表单的表单。 AJAX也一样（到此为止）。首先做一些事情，这样您就可以轻松地理解该过程，然后使其变得更酷。
您可以在提交前在JS中或在提交后在PHP中验证用户数据。但是，可以在DevTools（F12）控制台中读取，调试甚至更改javascript-因此，除了诸如“字段是否为空”之类的超基本内容外，不要在javascript中进行重要的验证。
从不信任用户数据。有些用户是黑客，如果您不清理他们输入的数据，他们可以拥有您。研究sanitizing user data和this also可以帮助您开始进行理解。

AJAX

提交表单时，屏幕将刷新。那么，那些您在其中填写表格，提交并没有任何刷新的网站会发生什么，但是更改会在现有页面上更新。这是通过AJAX完成的。

AJAX确实非常简单-几乎比表单简单。开始使用AJAX的基本规则与我上面的注释相同：具有与用户当前使用的后端PHP文件不同的后端PHP文件。

坦白说，这些天来，我们不再使用表格了。几乎我们过去使用AJAX进行表单处理的所有内容-都很简单！

那么AJAX如何工作？本质上，javascript将表单数据（请参见以下示例！）发送到指定的PHP文件，该文件处理数据并echo返回响应。您收到该响应，将其分解为变量，然后相应地更改页面。有关更多信息，请参见下面的参考。

注意：如果您花10分钟时间尝试以下参考文章中的示例，则可以节省数小时的头部抓挠时间。只需在您自己的服务器上重现示例并进行一些操作即可。

参考：

How a form works

HTML Forms vs Ajax

Simple overview of AJAX

Simple login system with ajax

Answer 2

您需要使用event.preventDefault()来阻止表单正在提交的默认操作。

更改

document.getElementById('submit').addEventListener('click',
 function(e){
 document.querySelector('.feedback-background').style.display='none';
 document.querySelector('.popup').style.display='flex';
}

收件人

document.getElementById('submit').addEventListener('click',
function(e){
 document.querySelector('.feedback-background').style.display='none';
 document.querySelector('.popup').style.display='flex';
 e.preventDefault();
 }

但是，阻止提交表单将阻止表单中的数据发送到服务器以进行处理并将其保存在数据库中。为了能够处理发送到服务器的数据，您将需要使用某种服务器端编程语言，并且需要设置表单的action属性； Java语言不足以完成此任务。

Answer 3

首先，您想使用JavaScipt验证表单中的数据。这很简单，您可以运行所有检查并进行验证，但是接下来出现的问题是您希望站点执行什么操作。您希望数据反映在页面上，但尚未向我们提及您网站的目标。看看我是否有简单的东西，想在表单上运行检查并在网站上的其他地方输出，就像这样简单：

相同页面验证


从表单获取数据

在表单提交代码中，使用函数或if语句对输入进行验证检查。（每个Google均提供最佳做法）。

如果验证失败怎么办？您必须通过在html上附加通知以向用户显示发生了验证错误的方式来处理该问题。

表单验证完成后，您必须e.preventDefault（），这将阻止网站加载。

如果验证有效，请获取表单输入的值并将其附加到html元素，以便可以输出它们。

好的，但是正如您所看到的，即使没有表单进行提交过程，您仍然可以通过100种方法来执行此操作。为什么不只在运行相同验证并返回数据的onClick上运行一个函数，然后将其附加到html。

但要注意的是，删除数据的原因是因为表单正在尝试对数据进行处理，并且当页面刷新时，它什么也没有发生，因此一切都丢失了。正确的方法是尝试构建应用程序，就像这样：

常规表格提交


一旦输入了来自用户的输入，然后单击了提交按钮。如果有任何错误阻止表单提交，但没有错误继续，请运行验证

对您说的php文件运行后端验证。运行与JS中相同的验证，但使用PHP或首选的后端语言。如果有任何错误，则需要研究在向用户提交表单时显示php错误。

如果一切正常，则可以将用户信息存储在数据库中，然后查询特定用户。

如果您要访问同一页面，则没有重新加载信息，表明您需要使用php研究ajax。这是一个很好的做法，一旦您开始工作，它就会变得很酷。

为了显示用户信息，从后端获取数据时还必须考虑。如果要显示刚刚输入的用户，则可以获取列表的最后一个用户。

有很多方法可以解决这个问题，并且将所有代码投入工作将花费更多的时间，但是我希望我对您的想法有所了解。

Answer 4

如果要在提交之前验证数据，则需要侦听表单的submit事件。在侦听器内部，您可以从输入中检索数据，对其进行验证，并在必要时设置适当的警告等。如果验证失败，则可以阻止提交从侦听器返回的false。

提交表格后会怎样？

4 个答案:

AJAX

相同页面验证

常规表格提交