在提交表单之前使用 jquery 检查 $_POST 数据答案

【问题标题】：Check $_POST data with jquery before submitting the form在提交表单之前使用 jquery 检查 $_POST 数据
【发布时间】：2016-11-13 07:12:02
【问题描述】：

我有一个表单将用户的First Name 发送到数据库中。我正在检查用户在 php 中使用 regex 发送的信息。为了让我的项目更具交互性，我决定在将信息发送到 PHP 之前验证 jQuery。

我的项目如下所示：

<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>

<body>
    <form >
        <div>
            <label>First Name</label>
            <input name="firstname" type="text">
        </div>
        <div>
            <input type="submit">
        </div>
    </form>
</body>
</html>

<script>
    $(document).ready(function() {
        
        $("form").submit(function (e) {
            
            var firstname = $(this).find('input[name="firstname"]').val();

            var regex = /^[A-Za-z0-9 \-']+$/;//Only numbers, Letters, dashes, apostrophes and spaces are accepted
            if(regex.test(firstname)){
                alert('Valid Name.');
            }else{
                alert('Invalid Name.');
                e.PreventDefault();
            }
        });
    });
</script>

现在我有两个问题：

在将数据存储到数据库之前，是否真的需要再次检查PHP中的First Name？（为了提高安全性）
如何在alert('Valid Name.'); 之后提交表单？

感谢您的帮助。

【问题讨论】：

在警报后使用return true 提交表单。我还会再次检查名字
请注意，因为这非常重要：客户端验证只是为了方便用户，绝不能依赖于确保服务器端数据有效！您可以通过简单地关闭 javascript 或使用 curl 等命令行工具提交到您的服务器来绕过所有验证。如果你只有客户端验证，那么你基本上没有验证。
1. stackoverflow.com/questions/23922284/…
在您的 from 中添加操作以提交。在您的脚本中返回 true。
表单将被提交，因为您在提交后正在检查验证

标签： javascript php jquery forms

【解决方案1】：

试试这个

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js" ></script>
     <script type="text/javascript" src="jquery-2.2.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>

    <body>
        <form >
            <div>
                <label>First Name</label>
                <input name="firstname" id="first_name" type="text">
            </div>
            <div>
                <input type="submit">
            </div>
        </form>
    </body>
    </html>

    <script>
    jQuery.validator.addMethod("firstName",function(value,element,param)
    {
  if(this.optional(element))
    {//This is not a 'required' element and the input is empty
      return true;
    }

  if(/^[A-Za-z0-9 \-']+$/.test(value))
    {
      return true;
    }

    return false;

},"Please enter a valid First Name");

$(function()
{
    $('#myform').validate(
      {
      rules:
        { 
          first_name:{ required:true, firstName:true }
        }
      });

});
    </script>

【讨论】：

请评论您的答案，因为我看不出您的代码和我的代码之间的区别

【解决方案2】：

首先要记住，用户输入的验证仅在应用程序的服务器端实现！！！您无法使用 JS 在客户端验证输入数据，因为它可以很容易地传递（通过禁用 javascript 或使用 Curl 等工具）。

但是，您可以提高用户体验，例如在提交表单之前验证输入或通知忘记填写输入的用户。

要通知用户未填写的输入，您只需使用新的 html 5 属性 required 就像上面一样

Username: <input type="text" name="usrname" required>

required 属性不会让用户提交表单，除非他填写了相关的输入。

您还可以使用maxlength 属性来解决诸如“密码必须包含最多 X 个字母。

Password: <input type="password" name="pass" maxlength="8" size="8"><br>

如何在服务器端验证输入

这方面有很多技术，您可以在 Stackoverflow 上找到所有这些技术。 Ι 将推荐投票最高的帖子How can I prevent SQL injection in PHP?，它可以准确回答您的问题。

只有两个项目符号可以压缩上述帖子，我建议您以其他方式阅读

始终转义您的数据
用mysqli代替mysql

如何在 alert('Valid Name.'); 之后立即提交表单?

这很简单，只需使用此代码

    <form action="action_page.php" method="post">
    <div>
        <label>First Name</label>
        <input name="firstname" type="text">
    </div>
    <div>
        <input type="submit">
    </div>
</form>

上面的代码将使用POST 方法在action_page.php 中“发送”用户对进程的输入，您可以在其中使用$_POST supergloba 表（如$firstname = $_POST['fistsname'] 等）读取。

【讨论】：

【解决方案3】：

首先，您应该始终验证服务器端的表单提交，特别是如果您将这些值传递给 DB - SQL 注入，那么困难是真实的。

至于表单提交流程你可以...

return true

... 在有效名称警报和正常提交的表单之后。

由于您已经绑定到该提交事件，如果您通过 ajax 提交表单并在服务器验证失败时提供反馈，对用户来说会更好。因此，用户永远不会离开页面，您可以同时处理客户端和服务器验证。

看看 ParsleyJS - http://parsleyjs.org/ - w00t！

【讨论】：