javascript - 将可观察日期与 knockout 和 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 分开，这很简单。

这是您的 fiddle ，应用了这种方法:

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 通过传递您所描述的可观察量来完成此操作，那么您可以这样做:

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.");

<小时/>

(引用注释)一旦使用 bootstrap-datetime 小部件，您需要小心该小部件如何更改输入值，以及更改值的方法如何与 jquery-validation 相互作用框架和 KO 框架，两者都依赖于变更事件。

在你的 fiddle 中，问题似乎是在小部件成功将新值加载到输入之前，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/

在这个 fiddle 中有一些console.logs，您可以跟踪序列:

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