javascript - 如何验证基于选项卡的列表表单并使用 php ajax 保存？

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 7 年前。

Improve this question

我有表单的选项卡面板列表。我将使用 jquery 验证插件，并且必须根据选项卡明智地保存。如何使用jquery validate插件和php ajax将其保存在数据库中。请查看截图

<script src="<?php echo base_url(); ?>application/js/jquery.validate.js"></script>
<script type="text/javascript">
    $("#signupForm").validate({
        rules: {
            old_password: "required",
        },
        messages: {
            old_password: "Please enter your firstname",
        }

    })
</script>

   <form name="validation-form" id="validation-form">
   <input type="password" name="old_password1" id="old_password" autofocus>
</form>

Answer 1

我可以使用 jQuery 给你答案。并让您了解如何做到这一点。

首先，让我们获取您的用户当前拥有的现有密码。然后将其存储在隐藏输入中。

<input type="hidden" id="current_pass" value="<?php echo $currentpassword; ?>">

然后您的表单包含三个输入字段，每个字段都分配有 id:

<form name="validation-form" id="validation-form">
  <input type="hidden" id="current_pass" value="password!1234">
  <input type="password" name="old_password1" id="old_password1" placeholder="Old Password" autofocus required>
  <input type="password" name="new_password1" id="new_password" placeholder="New Password" required>
  <input type="password" name="new_password2" id="new_password2" placeholder="Confirm New Password" required>
  <input type="submit" id="submit">
</form>

然后让我们创建脚本。我已经使用注释在里面添加了解释:

<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE NECESSARY JS FILE -->
<script>

  $(document).ready(function(){

    $("#submit").click(function(){ /* WHEN THE FORM IS SUBMITTED OR WHEN THE SUBMIT BUTTON IS CLICKED */
      var current = $("#current_pass").val(); /* CURRENT PASSWORD */
      var oldpass = $("#old_password1").val(); /* OLD PASSWORD KEY IN */
      var newpass = $("#new_password").val(); /* NEW PASSWORD KEY IN */
      var newpass2 = $("#new_password2").val(); /* NEW PASSWORD CONFIRMED KEY IN */
      if(newpass == newpass2 && oldpass == current){ /* IF THE NEW PASSWORD IS THE SAME WITH THE CONFIRMED PASSWORD AND WHEN THE CURRENT PASSWORD MATCHES THE KEY-IN OLD PASSWORD */
        $.ajax({ /* START AJAX */
          type: "POST", /* METHOD TO PASS THE DATA */
          url: "changepassword.php", /* THE DIRECTORY/FILE WHERE THE DATA WILL BE PASSED ON */
          data: { "newpassword": newpass } /* THE DATA WE WILL BE PASSING */
        }); /* END OF AJAX */
      } /* END OF CHECKING INPUTS */
    });

  });

</script>

您会在脚本中注意到我们将数据传递到 changepassword.php 文件。您必须在此文件中创建更新查询或根据您的偏好更改目录。

示例changepassword.php文件:

$stmt = $connection->prepare("UPDATE table SET password = ? WHERE id = ?");
$stmt->bind_param("si", $_POST["newpassword"], $id);
$stmt->execute();
$stmt->close();

您可以查看这个jsfiddle ，但没有 ajax 脚本。

我希望您以安全的方式将密码存储到数据库中。就像使用 password_hash .