页面加载时jQuery.Deferred报错：无法读取undefined的settings属性

这个报错的核心原因很明确：你在调用rules("add")给字段加验证规则时，表单还没通过.validate()完成初始化。jQuery Validate的rules("add")方法必须依赖表单已经创建好的验证实例才能工作，你原来的代码把表单初始化放在了提交按钮的点击事件里，页面加载时就执行$("#username").rules("add")，这时候根本找不到表单的验证配置，自然抛出"读取settings属性失败"的错误。

修正后的代码 #

JavaScript部分

$(document).ready(function() {
  // 第一步：先初始化表单的验证实例
  $("#myForm").validate({
    // 验证通过后的提交逻辑，按需修改
    submitHandler: function(form) {
      alert("验证通过，可执行提交操作");
      // form.submit(); // 实际提交表单请取消注释这行
    }
  });

  // 第二步：给指定字段添加验证规则
  $("#username").rules("add", {
    required: true,
    minlength: 2,
    messages: {
      required: "请输入用户名",
      minlength: "用户名至少需要{0}个字符"
    },
    errorPlacement: function(error, element) {
      $("#usernameError").html(error);
    }
  });
});

HTML部分（给提交按钮补上id，确保选择器生效）

<!doctype html>
<html>
<body>
  <form id="myForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <span id="usernameError" style="color: red;"></span>
    <br>
    <input type="submit" id="submit" value="Submit">
  </form>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
</body>
</html>

额外说明 #

1. 不需要手动绑定提交按钮的click事件，jQuery Validate会自动拦截表单的提交动作，先执行验证。
2. 所有字段的验证规则，也可以直接在初始化.validate()时通过rules配置项统一设置，不一定非要用rules("add")，示例如下：

$("#myForm").validate({
  rules: {
    username: {
      required: true,
      minlength: 2
    }
  },
  messages: {
    username: {
      required: "请输入用户名",
      minlength: "用户名至少需要{0}个字符"
    }
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") === "username") {
      $("#usernameError").html(error);
    } else {
      error.insertAfter(element);
    }
  },
  submitHandler: function(form) {
    alert("验证通过");
  }
});

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