jQuery Validation实现Ajax登录表单时密码验证失效问题求助

问题1：密码验证后端无法获取username参数的解决 #

原因 #

jQuery Validate的remote规则默认仅提交当前正在校验的字段：校验用户名时只会提交username，校验密码时只会提交password，因此密码校验请求中后端没有$_POST['username']参数。

修复方法 #

修改script.js中密码的remote配置，手动附加用户名参数：

password: {
  required: true,
  minlength: 8,
  remote: {
    url: "../core/login.php",
    type: "post",
    // 新增data字段，手动传递用户名
    data: {
      username: function() {
        return $("input[name='username']").val();
      }
    }
  }
}

注意将选择器内的input[name='username']替换为你表单中用户名输入框的实际选择器即可。

问题2：合并统一错误提示的解决 #

方法1：后端直接返回错误字符串 #

jQuery Validate的remote规则如果接收到非true的返回值，会直接将返回值作为错误提示展示，你可以直接修改login.php的返回逻辑，只要验证失败就返回统一提示：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    require_once 'db.php';
    $error = '用户名或密码不正确';
    // 用户名校验
    if (isset($_POST['username'])) {
        $username = $_POST['username'];
        $sql = "SELECT * FROM users WHERE username='$username'";
        $results = mysqli_query($conn, $sql);
        if (mysqli_num_rows($results) != 1) {
            echo $error;
            exit;
        }
        echo 'true';
        exit;
    }
    // 密码校验
    if (isset($_POST['password'])) {
        $username = $_POST['username'];
        $password = $_POST['password'];
        $sql = mysqli_query($conn, "SELECT password FROM users WHERE username='$username'");
        $results = mysqli_fetch_array($sql);
        $hashed_password = $results['password'] ?? '';
        if(!password_verify($password, $hashed_password)) {
            echo $error;
            exit;
        }
        echo 'true';
        exit;
    }
} else {
    header('HTTP/1.0 403 Forbidden');
}

方法2：前端配置分组校验 #

如果你不想改后端，可以在JS中配置groups规则，将两个字段的错误提示合并展示：

$("#login").validate({
  // 新增groups配置，将两个字段归为同一校验组
  groups: {
    login: "username password"
  },
  // 可配置错误提示统一显示位置，比如都显示在密码框下方
  errorPlacement: function(error, element) {
    if (element.attr("name") == "username" || element.attr("name") == "password") {
      error.insertAfter("input[name='password']");
    } else {
      error.insertAfter(element);
    }
  },
  rules: {
    // 原有规则保持不变
  },
  messages: {
    username: {
      required: "请输入用户名",
      remote: "用户名或密码不正确"
    },
    password: {
      required: "请输入密码",
      remote: "用户名或密码不正确"
    }
  }
});

安全优化建议 #

当前代码存在严重SQL注入风险，请勿直接将用户提交的$_POST参数拼接进SQL语句，请替换为MySQLi预处理语句：

// 示例：用户名校验的预处理写法
$stmt = $conn->prepare("SELECT * FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$results = $stmt->get_result();
if ($results->num_rows != 1) {
  echo $error;
  exit;
}

内容的提问来源于stack exchange，提问作者JuanM2020