单击提交后的客户端表单验证答案

【问题标题】：client-side form validation after clicking SUBMIT单击提交后的客户端表单验证
【发布时间】：2014-05-10 20:32:46
【问题描述】：

我有 2 个 php 文件“source.php”和“target.php”。在我拥有的 source.php 部分中，

<form method="POST" id="form1" action="target.php">
...
<input type="submit" name="submit" value="Submit"/>
</form>

当我点击提交时，它会转到“target.php”（即使我在表单中有错误），但我想要这样，只有在所有表单字段都经过验证后，它才会转到目标页面，否则它显示某种警告消息并停留在同一页面上。请帮忙！也许这对某些人来说是一个愚蠢的问题，但我是初学者。（我知道如何进行所有字段验证及其工作正常）。

【问题讨论】：

您需要使用 Javascript 验证它们。阅读此thesitewizard.com/archive/validation.shtml
type="submit" 没有type="sumbit"
如果您将表单提交到另一个文件，您需要在 javascript 中验证表单并防止提交错误，否则您的表单将被定向到第二个文件。
HTML5 has a lot of form validation. 偶数正则表达式。

标签： javascript forms validation client-side-validation

【解决方案1】：

重复问题。下次发帖前请仔细搜索。

通常使用 javascripts 进行验证。但是在某些情况下 javascripts 效率低下，例如当您需要验证国家及其州时。将整个国家和州的列表发送给客户端是不切实际的。在这种情况下使用 AJAX。通过使用 AJAX，客户端在用户输入后立即将数据发送到服务器。然后它只获取所需的数据。它是客户端和服务器之间同时进行的双向通信。例如，如果用户输入国家/地区名称为 INDIA，使用 AJAX 加载 INDIA 状态进行验证，从而节省带宽。 JavaScript 和 AJAX 不容易学，你必须研究尝试并纠正不同的代码。只需谷歌“JavaScript 表单验证”...

这是来自 w3Schools...

必填字段下面的函数检查字段是否为空。如果字段为空，alert 框提示消息，函数返回false，表单不会提交：

function validateForm()
{
    var x=document.forms["myForm"]["fname"].value;
    if (x==null || x=="")
    {
       alert("First name must be filled out");
       return false;
    }
}

上面的函数可以在表单提交时调用：

例子

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

这里是更基本的例子http://www.w3schools.com/js/js_form_validation.asp

祝你好运

【讨论】：

【解决方案2】：

您可以使用 AJAX 来验证您的表单。不建议将 JavaScript 用于表单验证。 AJAX 验证的简单教程可用here

但是请注意，即使您在提交到 target.php 之前验证您的表单，也请务必确保您也检查了 target.php 中的数据。这是因为 JavaScript 可以在浏览器中更改（感谢现代 DOM 解释器）。可以使表单在没有 AJAX 验证的情况下提交。所以你应该在提交之前和之后检查两次。

还要确保对数据进行转义，因为永远无法信任用户输入。您还应该使用 strip_tags($string) 以防止使用插入 php 代码。

【讨论】：

不，在实际发布表单之前使用 ajax 验证表单是个坏主意。这意味着您实际上是在两次往返于服务器以发布表单，第一个已经发送了所有数据。使用 javascript 进行客户端验证就可以了。但无论您是否使用客户端验证，您始终必须使用服务器端验证。
@Arjan 通过 ajax 验证，我的意思是检查用户名可用性、正确的电子邮件格式等。但是，是的，必须始终使用服务器端验证，因为我们不知道数据是什么。可以是任何东西，php 代码、SQL 注入技术等。
没错，您可以使用 ajax 来检查用户名的可用性。但是你应该在用户输入用户名时这样做，而不是在他想提交表单时这样做。（并且存在一些安全问题，因为通过用户名列表并找出哪些用户名很容易。）此外，您仍然需要在提交表单时验证用户名。我还忘了提到strip_tags() 是针对潜在问题的错误解决方案。（仅当您使用 eval() 时，插入 php 代码才是问题。）echo strip_tags('foo<bar'); 打印出 foo。
@Arjan 是的，您所说的也是正确的。我通常在 jQuery blur 上使用 ajax 用户名检查。是的，我对strip_tags 的看法是错误的。

【解决方案3】：

JavaScript 很可能是最简单的方法（阅读其他帖子）。

但是，如果您不想使用 JavaScript，您可以随时检查是否所有表单都使用 isset() 或类似的设置，然后在 URL 中传递 $_POST 变量并使用 $_GET 获取这些变量。当然要确保 URL 中没有任何敏感信息。此外：您始终可以使用全局变量。

另一种不使用 JavaScript 的方法是在多次检查（如转义字符串等）后提交到数据库，甚至可能进行加密，但我不建议这样做，因为这是很长的路要走。

【讨论】：