将可观察日期与淘汰赛和 jQuery 验证进行比较

Question

是否可以将日期与 Knockout observables 和 jQuery Validation 进行比较？我有一个 StartDate 和一个 EndDate，都是可观察的。我想验证 EndDate 是否总是大于 StartDate。

我已经尝试过 addMethod 功能，但我似乎无法传入 self.StartDate。 addMethod 似乎不接受 KO observables，所以我必须传入字符串 ID“#StartDate”。

$.validator.addMethod("dateGreater", function(value, element, params){
       var endDate = new Date(value); // this returns incorrect date.
       var startDate = new Date($(params).val()); 

       return this.optional(element) || startDate < endDate;
   }, "The End Date must be greater thatn the Start Date.");

此代码的问题在于，当用户使用 DatePicker 选择日期时，EndDate 返回上一个日期，而不是当前选择的日期，并且由于 StartDate 不是一个正在验证的可观察对象，如果用户更改它，验证不会触发。

我想我的问题确实是，这可以通过 jQuery 验证来完成，还是应该使用 Knockout-validation？

我创建了一个简单的 jsfiddle，它显示了我想要完成的工作。 http://jsfiddle.net/kahanu/htqfa1qw/6/

Answer 1

这个答案遵循将 jquery-validation 保持在 KO 之外的方法。我认为这没关系，因为你不会失去任何魔法； jquery-validation 有自己的跟踪变化的框架，它把 KO 和 jquery-validation 分开，这很简单。

这是你的小提琴，应用了这种方法：

http://jsfiddle.net/htqfa1qw/7/

修复如下：

1. jquery-validation 需要输入元素中的名称

2. 然后这些名称与规则对象中的键对应。

3. 参数传递很奇怪，文档没有很好地解释它！

所以你的规则对象现在看起来像这样：

    EndDate: {
        required: true,
        dateGreater: {
            param: "StartDate"
        }
    }

也就是说我们希望<input name="EndDate"> 大于<input name="StartDate">

然后我们修改规则，让它直接从 DOM 中获取值，而不需要通过 KO：

var start = new Date($("[name="+param+"]").val());

---

如果你确实想通过 KO 传递你描述的 observable 来做到这一点，那么你可以这样做：

http://jsfiddle.net/htqfa1qw/9/

在应用之前实例化您的数据模型：

var dm = new DataModel();
ko.applyBindings(dm);

然后更改验证规则以通过参数查找方法，并调用它：

$.validator.addMethod("dateGreater", function (endDate, element, param) {
    var end= new Date(endDate);
    var start = new Date(dm[param].call());
    return this.optional(element) || start < end;
}, "Start Date must be less than End Date.");

---

（对 cme​​ts 的引用）一旦它与 bootstrap-datetime 小部件一起工作，您需要注意小部件如何更改输入值，以及它更改值的方法如何与 jquery-validation 交互框架和 KO 框架，两者都依赖于变更事件。

在您的小提琴中，问题似乎是在小部件成功将新值加载到输入之前，jquery-validation 被旧日期值触发。因此，您会看到对旧值进行验证...快速修复似乎是在您已经拥有的事件处理程序中调用 jquery-validation 的 valid() 方法来触发手动验证：

    $el.datepicker(options).on("changeDate", function (ev) {
        var observable = valueAccessor();
        observable(ev.date);
        $(this).datepicker('hide');

        // Poke jquery validation to validate this new value.
        $("#date-form").valid();
    });

在这里演示：

http://jsfiddle.net/htqfa1qw/12/

在这个小提琴中有一些console.logs，你可以跟踪序列：

1. 使用旧值调用验证（“开始日期...”日志语句）
2. 您的事件处理程序使用新值启动（“changeDate”日志语句）
3. 我们手动调用 valid() 并使用新值调用验证（第二个“开始日期...”日志语句）