了解复杂的 jQuery 验证规则

Question

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

addMethod添加的函数，这是自定义规则吗？这就是为什么在规则中列出函数并将其设置为 "true"?
每个规则的 defaultInvlid 函数是什么？我看到它 returns true/false。 returning true 的效果是什么？
为什么消息下包含函数？这是否意味着如果函数 return 为真，则显示该消息？

$("#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 -->

Answer 1

For the functions added with addMethod, is this a custom rule? Is that why in rules the function is listed and set to "true"?

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

但是，是的，the .addMethod() method 用于创建自定义规则 (a.k.a。"method")。将其设置为 true 在此字段上声明它，与将任何其他规则设置为 true.

没有什么不同

What is the defaultInvalid function for on each of the rules? I see that it returns true/false. What is the effect of returning 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

Why are functions included under messages? Does this just mean if the functions return true, display that message?

您的messages选项中没有包含任何功能。这正是您定义自定义错误消息的地方。

.validate() 方法中的所有内容 是一个 "object literal"... 逗号分隔的 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 以获取所有文档。

了解复杂的 jQuery 验证规则

Understanding complex jQuery Validation rules

jquery

jquery-validate