了解复杂的jQuery验证规则

我有一个非常复杂的表单的验证方法，并且由我之前的前端开发人员编写。有一个主要问题有两个子问题，如果主要问题被切换，至少在子问题上必须切换。任何被切换的子问题都必须有评论。我必须对其进行修改，但首先要了解它是如何工作的。我希望有人可以回答以下问题：了解复杂的jQuery验证规则

对于添加了addMethod的函数，这是一个自定义规则吗？这就是为什么规则中的功能列出并设置为“真”？
什么是每个规则的defaultInvlid函数？我看到它返回true/false。返回true的效果是什么？
为什么函数包含在消息中？这是否意味着如果函数返回true，显示该消息？

$("#form1").validate({ 
      errorLabelContainer: $("#form-error"), 
      rules: { 

       //sub fields question 1 
       'report_question_ID_product_received_as_ordered_SUB_missing_parts_comment': { 
        required: '#report_question_ID_product_received_as_ordered_SUB_missing_parts_not_acceptable:checked', 
        report1subfields: true, 
        defaultInvalid: { 
         depends: function (element) { 
          return $('#report_question_ID_product_received_as_ordered_SUB_missing_parts_not_acceptable').is(':checked') ? true : false; 
         } 
        } 
       }, 

       'report_question_ID_product_received_as_ordered_SUB_other_issues_comment': { 
        required: '#report_question_ID_product_received_as_ordered_SUB_other_issues_not_acceptable:checked', 
        report1subfields: true, 
        defaultInvalid: { 
         depends: function (element) { 
          return $('#report_question_ID_product_received_as_ordered_SUB_other_issues_not_acceptable').is(':checked') ? true : false; 
         } 
        } 
       } 

      }, 
      focusInvalid: false, 
      messages: { 
       'report_question_ID_product_received_as_ordered_SUB_missing_parts_comment': { 
        defaultInvalid: "Are there missing parts?", 
        report1subfields: "Did You Receive The Product As Ordered? > At least one subquestion is mandatory." 
       }, 
       'report_question_ID_product_received_as_ordered_SUB_other_issues_comment': { 
        defaultInvalid: "Are there other issues with your order?", 
        report1subfields: "Did You Receive The Product As Ordered? > At least one subquestion is mandatory." 
       } 
      }, 

      submitHandler: function (form) { 

       //SUBMIT 

      }, 

      invalidHandler: function (event, validator) { 
       showFormError(validator); 
      } 
}).settings.ignore = [];

HTML

    <div id="question-form-wrapper"> 

          <div id="form-error" style="display: none"></div> 

          <div class="questions-form" id="report-questions-form"> 

           <div class="question question-textarea has-subquestions" runat="server" id="div0001_00" style="display:none;"> 
            <div class="question-intro clearfix"> 
             <h2 id="QuestionText0001_00" runat="server">Did You Receive The Product As Ordered?</h2> 

             <div class="no-yes answer-acceptable"> 
              <div class="no"><label class="label-1" for="report_question_ID_product_received_as_ordered_not_acceptable">Not Acceptable</label></div> 
              <a href="#" class="toggle" runat="server" id="report_question_ID_product_received_as_ordered_link"></a> 
              <div class="yes"><label class="label-2" for="report_question_ID_product_received_as_ordered_acceptable">Acceptable</label></div> 
              <label class="universal-label"></label> 

              <input type="radio" id="report_question_ID_product_received_as_ordered_not_acceptable" name="report-question-ID-product-received-as-ordered" value="0" runat="server"> 
              <input type="radio" id="report_question_ID_product_received_as_ordered_acceptable" name="report-question-ID-product-received-as-ordered" value="1" checked="true" runat="server"> 

             </div> 
            </div> 
            <div class="question-content"> 
             <div class="question-content-inner clearfix"> 

              <div class="sub-questions-list"> 

               <div class="sub-question sub-question-textarea" runat="server" id="div0001_01" style="display:none;"> 
                <div class="sub-question-intro clearfix"> 
                 <h3 id="QuestionText0001_01" runat="server">Are there missing parts?</h3> 

                 <div class="yes-no answer-acceptable"> 
                  <div class="yes"><label class="label-1" for="report_question_ID_product_received_as_ordered_SUB_missing_parts_not_acceptable">Yes</label></div> 
                  <a href="#" class="toggle" runat="server" id="report_question_ID_product_received_as_ordered_SUB_missing_parts_link"></a> 
                  <div class="no"><label class="label-2" for="report_question_ID_product_received_as_ordered_SUB_missing_parts_acceptable">No</label></div> 
                  <label class="universal-label"></label> 

                  <input type="radio" id="report_question_ID_product_received_as_ordered_SUB_missing_parts_not_acceptable" name="report-question-ID-product-received-as-ordered-SUB-missing-parts" value="1" runat="server"> 
                  <input type="radio" id="report_question_ID_product_received_as_ordered_SUB_missing_parts_acceptable" name="report-question-ID-product-received-as-ordered-SUB-missing-parts" value="0" checked="true" runat="server"> 

                 </div> 
                </div> 
                <div class="sub-question-content"> 
                 <div class="sub-question-content-inner clearfix"> 

                  <div class="rounded-corners"> 
                   <div class="rounded-corners-inner clearfix">       
                    <div class="comment-wrapper"> 
                     <textarea class="comment-for-question" cols="10" rows="20" name="report_question_ID_product_received_as_ordered_SUB_missing_parts_comment" id="report_question_ID_product_received_as_ordered_SUB_missing_parts_comment" runat="server">Please provide comments. Up to 5 photos can be attached.</textarea> 
                    </div> 

                    <div class="upload-photos clearfix" runat="server"> 

                     <div class="upload-photos-add" id="Q0001_01" runat="server"> 
                      <asp:AjaxFileUpload EnableViewState="false" ID="AjaxFileUpload1" ContextKeys="0001.01" runat="server" AllowedFileTypes="jpg,jpeg,png" OnUploadComplete="AjaxFileUpload_UploadComplete" OnClientUploadComplete="onClientUploadComplete" OnClientUploadCompleteAll="onClientUploadCompleteAll" OnClientUploadStart="onClientUploadStart" OnClientUploadError="onClientUploadError"></asp:AjaxFileUpload> 
                     </div> 

                     <div class="upload-photos-list"> 
                      <div class="upload-photos-list-inner clearfix" runat="server" id="divUploadListDynamic0001_01"> 
                      </div> 
                     </div> 

                    </div> 
                   </div> 
                  </div> 

                 </div> 
                </div> 
               </div> 

               <div class="sub-question sub-question-textarea" runat="server" id="div0001_02" style="display:none;"> 
                <div class="sub-question-intro clearfix"> 
                 <h3 id="QuestionText0001_02" runat="server">Are there other issues with your order?</h3> 

                 <div class="yes-no answer-acceptable"> 
                  <div class="yes"><label class="label-1" for="report_question_ID_product_received_as_ordered_SUB_other_issues_not_acceptable">Yes</label></div> 
                  <a href="#" class="toggle" runat="server" id="report_question_ID_product_received_as_ordered_SUB_other_issues_link"></a> 
                  <div class="no"><label class="label-2" for="report_question_ID_product_received_as_ordered_SUB_other_issues_acceptable">No</label></div> 
                  <label class="universal-label"></label> 

                  <input type="radio" id="report_question_ID_product_received_as_ordered_SUB_other_issues_not_acceptable" name="report-question-ID-product-received-as-ordered-SUB-other-issues" value="1" runat="server"> 
                  <input type="radio" id="report_question_ID_product_received_as_ordered_SUB_other_issues_acceptable" name="report-question-ID-product-received-as-ordered-SUB-other-issues" value="0" checked="true" runat="server"> 

                 </div> 
                </div> 
                <div class="sub-question-content"> 
                 <div class="sub-question-content-inner clearfix"> 

                  <div class="rounded-corners"> 
                   <div class="rounded-corners-inner clearfix">       
                    <div class="comment-wrapper"> 
                     <textarea class="comment-for-question" cols="10" rows="20" name="report_question_ID_product_received_as_ordered_SUB_other_issues_comment" id="report_question_ID_product_received_as_ordered_SUB_other_issues_comment" runat="server">Please provide comments. Up to 5 photos can be attached.</textarea> 
                    </div> 

                    <div class="upload-photos clearfix" runat="server"> 

                     <div class="upload-photos-add" id="Q0001_02" runat="server"> 
                      <asp:AjaxFileUpload EnableViewState="false" ID="AjaxFileUpload2" ContextKeys="0001.02" runat="server" AllowedFileTypes="jpg,jpeg,png" OnUploadComplete="AjaxFileUpload_UploadComplete" OnClientUploadComplete="onClientUploadComplete" OnClientUploadCompleteAll="onClientUploadCompleteAll" OnClientUploadStart="onClientUploadStart" OnClientUploadError="onClientUploadError"></asp:AjaxFileUpload> 
                     </div> 

                     <div class="upload-photos-list"> 
                      <div class="upload-photos-list-inner clearfix" runat="server" id="divUploadListDynamic0001_02"> 
                      </div>                    
                     </div> 

                    </div>                

                   </div> 
                  </div> 

                 </div> 
                </div> 
               </div> 
              </div> 

             </div> 
            </div> 
           </div> 
           <div class="actions"> 
            <input type="image" src="assets/images/css/button-next-red.png" alt="Next" runat="server" id="btnNext"> 
           </div> 

          </div><!-- #report-questions-form -->       
        </div><!-- #question-form-wrapper -->

来源

2015-02-06 KateMak

对于addMethod添加的功能，这是一个自定义规则？这就是为什么规则中的功能列出并设置为“真”？

我没有看到.addMethod()在OP任何地方使用。

但是，是的，the .addMethod() method用于创建自定义规则（又名“方法”）。将其设置为true宣布它在这个领域，没有比其他任何规则设置为true不同。

什么是defaultInvalid函数对每个规则？我看到它返回true/false。返回true的效果是什么？

defaultInvalid是一个自定义的方法，因为我看不到你的相应.addMethod('defaultInvalid', ...)，我不能告诉你它做什么。但是，true表示您希望规则对该字段有效，而false表示您不这样做。

你id和name值是可笑的长，所以我剪裁他们对我的答案...

defaultInvalid: { 
    depends: function (element) { 
     return $('#yourRadioID').is(':checked') ? true : false; 
    } 
}

The depends property is part of the rules option。它允许您为规则生效时设置条件。

在你的情况下，如果定向的无线电元件被用户选中，然后应用defaultInvalid规则的领域，否则不是。

换句话说，当定向的无线电检查，那就有这种效果......

defaultInvalid: true // <- rule is enabled for this field

而当定向的无线电未核对，那就有这种效果......

defaultInvalid: false // <- rule is disabled for this field

为什么被包括下消息功能
？这是否意味着如果函数返回true，显示该消息？

没有列入您messages选项功能。这正是定义自定义错误消息的地方。

一切的.validate()方法内部是一个“对象常量” ...由括号包围的key:value对逗号分隔的列表。允许value是另一个对象字面量或函数。（key的，并允许value的是按照该插件的作者。）

messages: { 
    yourField1: { // <- the input NAME attribute 
     required: "you must fill this out", // <- custom message for this required rule. 
     phoneUS: "must be a phone" // <- custom message for this phoneUS rule. 
    }, 
    yourField2: { // <- the input NAME attribute 
     required: "this is required", // <- custom message for this required rule. 
     number: "must be a number" // <- custom message for this number rule. 
    } 
},

没有很好的理由使用.settings这样附上ignore选项的.validate()结束...

$("#form1").validate({ ... }).settings.ignore = [];

这是非常草率的编码，因为它不同于其他选项，它不必要地调用另一种方法。

为了简化，只需要声明的ignore选项像任何其他...

$("#form1").validate({ 
    ignore: [], // <- inside validate() with your other options 
    errorLabelContainer: $("#form-error"), 
    rules: { 
     .... 
    }, 
    // your other options 
});

我强烈建议你检讨the SO Tag Wiki page为jQuery验证插件的基本使用情况的信息。
另请参阅the official website的所有文档。

来源

2015-02-06 23:31:18 Sparky

了解复杂的jQuery验证规则

回答

相关问题