javascript - jQuery 验证 - 如何使用两个或多个字段创建方法？

Question

我的系统中有多个开始和结束日期，在某些情况下，我的屏幕中有多个开始和结束日期。所有这些都分为两组并具有相同的行为:开始日期不能大于结束日期，并且它们之间的差异不能大于用户输入的输入。

我知道我必须创建两种方法，一个用于验证第一种情况，另一种用于验证第二种情况。问题是我不知道如何引用字段，例如:

// A custom method for validating the date range.
$.validator.addMethod("dateRange", function() {
    var startDate = $("#startDate").val();
    var endDate = $("#endDate").val();
    return isDate(startDate) && isDate(endDate) ? Date.parse(startDate) <= Date.parse(endDate) : true;
});

问题是:这样我就对输入名称进行了硬编码。如果每个屏幕只有一组日期，这会起作用，但是当我有多个日期时，这将不起作用。如何创建一个方法，而不对我想要使用的元素的 ID 进行硬编码，以便在整个系统中使用它？

我已阅读 http://jqueryvalidation.org/jQuery.validator.addMethod/ 中的在线文档但似乎确实可以解决我的问题，而且我认为使用组不足以处理所有元素，我可能必须为每组日期复制/粘贴。

我相信，如果您帮助我解决其中一个案例，第二个案例将使用相同的逻辑得到解决。

编辑:根据要求，这是 HTML

<table width="95%" id="tabela_interna">
    <thead><tr valign="middle"><th colspan="6">Relat&oacute;rio Interna&ccedil;&otilde;es Concierge</th></tr></thead>
    <tbody>
        <tr valign="middle">
            <td width="11%" align="left" class="td_label"><label for="dataInicialSolicitacao">Data Solicita&ccedil;&atilde;o Inicial</label></td>
            <td width="25%" align="left" class="td_dados">
                <input type="text" name="filtro.dataInicialSolicitacao" size="12" value="" id="dataInicialSolicitacao" class="data"/>

            </td>
            <td width="11%" align="left" class="td_label"><label for="dataFinalSolicitacao">Data Solicita&ccedil;&atilde;o Final</label></td>
            <td width="25%" align="left" class="td_dados">
                <input type="text" name="filtro.dataFinalSolicitacao" size="12" value="" id="dataFinalSolicitacao" class="data"/>

            </td>
        </tr>
        <tr valign="middle">
            <td width="11%" align="left" class="td_label"><label for="dataInicialLiberacao">Data Libera&ccedil;&atilde;o Inicial</label></td>
            <td width="25%" align="left" class="td_dados">
                <input type="text" name="filtro.dataInicialLiberacao" size="12" value="" id="dataInicialLiberacao" class="data"/>

            </td>
            <td width="11%" align="left" class="td_label"><label for="dataFinalLiberacao">Data Libera&ccedil;&atilde;o Final</label></td>
            <td width="25%" align="left" class="td_dados">
                <input type="text" name="filtro.dataFinalLiberacao" size="12" value="" id="dataFinalLiberacao" class="data"/>

            </td>
        </tr>
        <tr valign="middle">
            <td width="11%" align="left" class="td_label"><label for="dataInicialInternacao">Data Interna&ccedil;&atilde;o Inicial</label></td>
            <td width="25%" align="left" class="td_dados">
                <input type="text" name="filtro.dataInicialInternacao" size="12" value="" id="dataInicialInternacao" class="data"/>
            </td>
            <td width="11%" align="left" class="td_label"><label for="dataFinalInternacao">Data Interna&ccedil;&atilde;o Final</label></td>
            <td width="25%" align="left" class="td_dados">
                <input type="text" name="filtro.dataFinalInternacao" size="12" value="" id="dataFinalInternacao" class="data"/>
            </td>
        </tr>
</table>

Answer 1

我倾向于使用自定义属性来做到这一点，例如:

<input type="text" id="x" data-validate-date="true" data-validate-against="y" value="01/01/2000" />
<input type="text" id="y" value="1/1/2001" />
<input type="text" id="a" data-validate-date="true" data-validate-against="b" value="01/01/2000" />
<input type="text" id="b" value="4/4/2020" />

然后您可以定义验证规则，例如:

$.validator.addMethod("dateRange", function() {
    var allValid = true;
    var results = [];
    var datesToValidate = $("[data-validate-date]");

    for(var i = 0; i < datesToValidate.length; i++) {
        var d = datesToValidate[i];
        var startDate = $(d).val();
        var endDateSelector = "#" + $(d).attr("data-validate-against");
        var endDate = $(endDateSelector).val();
        results[i] = isDate(startDate) && isDate(endDate) && (Date.parse(startDate) <= Date.parse(endDate));
    }

    for(var j = 0; j < datesToValidate.length; j++) {
        if(!(results[j] == true)) {
          allValid = false;
        }
    }
    return allValid;  
});

我不知道这是否是最好的方法，但我认为它可能适合您。