jquery change password verification

With the popularity of the Internet, more and more people are beginning to understand and use various online services, such as online shopping, social media, etc. These services usually require us to create an account and set a password to ensure security and privacy protection. However, when we need to change the password, we may encounter some difficulties and errors. At this time, we need to use the JavaScript library jQuery to solve the problem. This article will introduce how to use jQuery for password verification and modification.

1. Password verification

First of all, we must ensure that the user enters the correct original password before they can modify it. To do this, we can create a form with two input boxes, one for the user's original password and one for the new password.

<form>
  <label>原密码：</label>
  <input type="password" id="oldPassword"><br>
  <label>新密码：</label>
  <input type="password" id="newPassword"><br>
  <input type="submit" value="更改密码" id="changePasswordBtn">
</form>

Then we use jQuery to listen to the click event of the submit button and verify whether the original password is correct. If the original password is entered correctly, the user is allowed to change the password, otherwise an incorrect input is prompted.

$(document).ready(function() {
  $('#changePasswordBtn').click(function(event) {
    event.preventDefault();

    // 获取原始密码和新密码
    var oldPassword = $('#oldPassword').val();
    var newPassword = $('#newPassword').val();

    // 发送AJAX请求到服务器验证原密码是否正确
    $.ajax({
      url: 'check_password.php',
      method: 'POST',
      data: { oldPassword: oldPassword },
      success: function(response) {
        if (response === 'success') {
          // 原密码正确，允许修改密码
          // ...
        } else {
          // 原密码错误，提示重新输入
          alert('原密码输入错误，请重新输入。');
        }
      }
    });
  });
});

In the above code, we use AJAX technology to send a POST request to the server to verify whether the original password entered is correct. The server-side implementation of simple password verification code is as follows:

// check_password.php
<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $oldPassword = $_POST['oldPassword'];
  $hashedPassword = $_SESSION['hashedPassword']; // 从会话中获取已加密的密码

  if (password_verify($oldPassword, $hashedPassword)) {
    echo 'success'; // 原密码正确
  } else {
    echo 'failure'; // 原密码错误
  }
} else {
  header('HTTP/1.1 405 Method Not Allowed');
  header('Allow: POST');
  exit;
}
?>

In the above code, we use PHP's built-in password verification function password_verify() to verify whether the original password entered is correct. Additionally, to ensure security, we use a session variable to store the encrypted password instead of transmitting the password in clear text to the client.

2. Password modification

After verifying the original password, we can use jQuery to modify the password. We again use AJAX technology to pass the new password to the server, and the server side will encrypt the new password and store it in the database. In order to verify whether the server successfully updates the password, we can perform corresponding operations in the callback function returned by the AJAX request.

// 修改密码
$.ajax({
  url: 'change_password.php',
  method: 'POST',
  data: { newPassword: newPassword },
  success: function(response) {
    if (response === 'success') {
      // 密码修改成功，提示用户并清除输入框内容
      alert('密码修改成功！');
      $('#oldPassword').val('');
      $('#newPassword').val('');
    } else {
      // 密码修改失败，提示用户
      alert('密码修改失败，请稍后再试。');
    }
  }
});

// change_password.php
<?php
session_start();
 
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $newPassword = $_POST['newPassword'];
  $email = $_SESSION['email']; // 假设我们使用电子邮件作为用户名

  // 将新密码加密
  $hashedPassword = password_hash($newPassword, PASSWORD_DEFAULT);

  // 将新密码存储到数据库中
  $db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
  $stmt = $db->prepare('UPDATE users SET password = ? WHERE email = ?');
  $stmt->execute(array($hashedPassword, $email));

  // 检查是否成功更新数据库
  if ($stmt->rowCount() === 1) {
    echo 'success'; // 密码修改成功
  } else {
    echo 'failure'; // 密码修改失败
  }
} else {
  header('HTTP/1.1 405 Method Not Allowed');
  header('Allow: POST');
  exit;
}
?>

In the above code, we use PHP's built-in password encryption function password_hash() to encrypt and store the new password into the database. If the database is successfully updated, the server returns the string "success", otherwise it returns "failure". In the client code, we determine whether the operation was successful based on the string returned by the server, and prompt the user accordingly.

To sum up, using jQuery for password verification and modification is a safe and reliable method to ensure the security and privacy protection of user accounts. It should be noted that we should use higher-level encryption algorithms and technologies to ensure the security of user passwords, such as using the bcrypt algorithm or/and the extended key derivation function PBKDF2 to encrypt passwords.

The above is the detailed content of jquery change password verification. For more information, please follow other related articles on the PHP Chinese website!