瞭解複雜的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驗證規則

回答

相關問題