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

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

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

Fliki

高效帮用户创建视频，具有文本转语音功能

96

查看详情

$(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();      }   }); });

大家都在看：