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

Question

我有表格的选项卡面板列表。我将使用jquery验证插件，我必须根据选项卡wise进行保存。如何使用jquery验证插件和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();

您可以检查这个小提琴，但不需要ajax脚本。

我希望你以一种安全的方式将你的密码存储到你的数据库。比如使用password_hash。