jQuery Validate 中带点号 name 属性的验证配置详解

rules: {
  Report_Name: { // 错误！与实际name不符
    required: true
  }
}

rules: {
  Report.Name: { // 错误！JavaScript会将其解析为对象属性访问
    required: true
  }
}

$(document).ready(function () {
  $("#formReport").validate({
    rules: {
      // 核心修改：使用引号包裹包含点号的name属性
      "Report.Name": {
        required: true
      }
    },
    messages: {
      // 核心修改：同样使用引号包裹
      "Report.Name": {
        required: "报告名称字段是必填项。"
      }
    },
    submitHandler: function (form) {
      // 此时，this.valid() 和 this.numberOfInvalids() 将能正确反映验证状态
      var numOfErrors = this.numberOfInvalids();
      alert("submitHandler: 错误数量 - " + numOfErrors);
      if (numOfErrors === 0) {
        // 提交表单逻辑
        // submitReport(); 
        form.submit(); // 或者使用原生的表单提交
      }
    },
    showErrors: function (errorMap, errorList) {
      var numOfErrors = this.numberOfInvalids();
      alert("showErrors: 错误数量 - " + numOfErrors);
      // 默认的错误显示逻辑，或者自定义显示
      this.defaultShowErrors(); 
    }
  });
});

<form method="post" id="formReport">
    <div class="form-group">
        <label for="Report_Name">报告名称</label>
        <input type="text" class="form-control" 
               id="Report_Name" 
               name="Report.Name" 
               value="" />
        <span data-valmsg-for="Report.Name" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
</form>

<!-- 引入必要的库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>

$(document).ready(function () {
  $("#formReport").validate({
    rules: {
      "Report.Name": { // 关键：用引号包裹
        required: true
      }
    },
    messages: {
      "Report.Name": { // 关键：用引号包裹
        required: "请填写报告名称。"
      }
    },
    // 确保onsubmit为true，这是默认值，但明确指定可读性更好
    onsubmit: true, 
    submitHandler: function (form) {
      // 当所有验证通过时执行
      alert("表单验证成功，准备提交！");
      // 实际的表单提交逻辑，例如AJAX提交或原生提交
      // form.submit(); 
      // submitReport(); // 如果有自定义提交函数
    },
    showErrors: function (errorMap, errorList) {
      // 自定义错误显示逻辑
      if (errorList.length > 0) {
        console.log("当前有 " + errorList.length + " 个验证错误：");
        errorList.forEach(function(error) {
          console.log(error.element.name + ": " + error.message);
          // 将错误消息显示在对应的span标签中
          $('span[data-valmsg-for="' + error.element.name + '"]').text(error.message);
        });
      } else {
        // 清除所有错误消息
        $('.text-danger').text('');
      }
      // 如果需要默认的错误显示方式，可以调用 this.defaultShowErrors();
      // this.defaultShowErrors(); 
    }
  });
});