如何使用 jQuery Validate 验证一个月中的天数？

Question

我有一个表单，其中有两个文本框，一个用于天，另一个用于月。我想让这个字段在选择其他字段时成为必填字段，同时我还想验证天数字段是否输入的天数出现在输入的月份中。这是我的 HTML

<div class="row">   
    <div class="col-xs-5 form-group">
        @Html.LabelFor(model => model.Type)
        @Html.DropDownListFor(x => x.TypeID, new Granite.UserManagement.UserManagementController().GetUserTypeIenumerable(), "Select Type", new { @class = "form-control", tabindex = 10 })
        <div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
    </div>
</div>
    <div class="row">        
        <div class="col-xs-5 form-group">
            <div class="col-xs-12">
                <div class="col-xs-4 pull-left">
                    @Html.LabelFor(model => model.BirthDay)
                    @Html.TextBoxFor(x => x.BirthDay, new { @Class = "form-control", tabindex = 25 })
                    <div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
                </div>
                <div class="col-xs-4 pull-right">
                    @Html.LabelFor(model => model.BirthDayMonth)
                    @Html.TextBoxFor(x => x.BirthDayMonth, new { @Class = "form-control", tabindex = 26 })
                    <div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
                </div>
            </div>

        </div>
    </div>
<div class="row">
    <div class="col-xs-12 form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</div>

这是我的 jQuery.Validate 方法

$(function () {
        $("#form0").validate({
            debug: true,
            errorClass: 'k-invalid',
            validClass: 'has-success',
            errorElement: 'span',
            rules: {
                TypeID: "required",
               BirthDay: {
                    required: {
                        depends: function (element) {
                            return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
                        }
                    },
                    number: true,
                    range: [1, 31],
                    digits: true
                },
                BirthDayMonth: {
                    required: {
                        depends: function (element) {
                            return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
                        }
                    },
                    number: true,
                    range: [1, 12],
                    digits: true
                }
            },
            messages: {
                TypeID: "This field is required.",
                               BirthDay: {
                    required: "This field is required.",
                    range: 'The entered range is not correct.',
                    number: 'This number is not valid.',
                    validate_date:true
                },
                BirthDayMonth: {
                    required: "This field is required.",
                    range: 'The entered range is not correct.',
                    number: 'This number is not valid.'
                }
            }
        });
    });

我想做的就是，我想让 TypeID 字段成为必填项，并根据 TypeID 字段验证其他两个控件，除此之外

我还想检查用户在 BirthDate 字段中输入的日期是否存在于 BirthDayMonth 字段中提到的月份

任何人都可以帮助我了解如何使用 jQuery.Validate 插件实现此功能吗？

更新 1 我更新了渲染的 HTML

<form action="/" data-ajax="true" data-ajax-failure="fail" data-ajax-method="Post" data-ajax-success="success" data-ajax-url="/UserManagement/EditingPopup_Create" id="form0" method="post" novalidate="novalidate">
    <div class="row">
        <div class="col-xs-5 form-group has-success">
            <label for="Type">Type</label>
            <select class="form-control k-valid" data-val="true" data-val-number="The field TypeID must be a number." data-val-required="The TypeID field is required." id="TypeID" name="TypeID" tabindex="10">
                <option value="">Select Type</option>
                <option value="11">Employee(Full Time)</option>
                <option value="12">Employee(Part Time)</option>
                <option value="13">Temp(Long Term)</option>
                <option value="14">Temp(Short Term)</option>
                <option value="15">Security</option>
                <option value="16">Parking</option>
                <option value="17">Vendor</option>
                <option value="18">Consultant</option>
                <option value="19">Third Party</option>
                <option value="20">Samson</option>
            </select>
            <div class="pg-tool-tip"><div class="error-placer"></div><div class="arrow-up"></div></div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-5 form-group">
            <div class="col-xs-12">
                <div class="col-xs-4 pull-left has-success has-error">
                    <label for="BirthDay">BirthDay</label>
                    <input class="form-control k-valid k-invalid" data-val="true" data-val-number="The field BirthDay must be a number." id="BirthDay" name="BirthDay" tabindex="25" type="text" value="">
                    <div class="pg-tool-tip"><div class="error-placer">The entered range is not correct.</div><div class="arrow-up"></div></div>
                </div>
                <div class="col-xs-4 pull-right has-error">
                    <label for="BirthDayMonth">BirthDayMonth</label>
                    <input class="form-control k-invalid" data-val="true" data-val-number="The field BirthDayMonth must be a number." id="BirthDayMonth" name="BirthDayMonth" tabindex="26" type="text" value="">
                    <div class="pg-tool-tip"><div class="error-placer">The entered range is not correct.</div><div class="arrow-up"></div></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 form-group">
            <input type="submit" value="Submit" class="btn btn-primary">
        </div>
    </div>
</form>

更新 2 我在我的插件功能中注意到的一件事是，当我像这样对代码做一些小改动时它工作正常但它不符合我的要求

rules: {
                TypeID: "required",
               BirthDay: {
                    required: {
                        depends: function (element) {
                            return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
                        }
                    }
                },
                BirthDayMonth: {
                    required: {
                        depends: function (element) {
                            return $('#TypeID').val() == '11' || $('#TypeID').val() == '11'
                        }
                    }
                }
            }

变化是，

if i remove number,range and digit

根据规则然后我的元素得到验证，任何帮助将不胜感激！！！

Answer 1

经过长时间的研究，我能够实现功能，下面是我的代码

BirthDay: {
required: {
depends: function (element) {
    return $('#TypeID').val() == '11' || $('#TypeID').val() == '12'
}
},
number: true,
range: [1, 31],
validateDate: true
},
BirthDayMonth: {
required: {
depends: function (element) {
    return $('#TypeID').val() == '11' || $('#TypeID').val() == '12'
}
},
number: true,
range: [1, 12]
},

我已将 BirthDay 和 BirthDayMonth 字段设置为仅当 TypeID 字段的值为 11 或 12 时才需要，然后我创建了BirthDay 字段中名为 validateDate 的扩展方法，如下所示

jQuery.validator.addMethod("validateDate", function (value, element) {
if ($('#BirthDayMonth').val() != '') {
    var month = $('#BirthDayMonth').val();
    var day = $('#BirthDay').val();
    var result = false;
    if (month % 2 != 0) {
     result = day <= 31;
    } else {
    if (month == 2) {
    result = day <= 29
    } else {
    result = day <= 30;
    }
    }
    return result;
} else
{
    return true;
}
}, "Entered date doesnot exist in the month.");

谢谢

如何使用 jQuery Validate 验证一个月中的天数？

How to validate days of month using jQuery Validate?

jquery

jquery-validate