knockoutjs 验证 - 重新计算验证规则答案

【问题标题】：knockoutjs validation - recompute validation rulesknockoutjs 验证 - 重新计算验证规则
【发布时间】：2012-12-17 01:14:25
【问题描述】：

我正在使用 knockoutjs 和 knockoutjs 验证插件来验证我的视图模型。这是我的javascript代码

// enable validation
ko.validation.init();

// View model
function AppViewModel() {

    this.Canceled = ko.observable(false);

    this.Name = ko.observable("").extend({

        //custom validation
        validation: {
            validator: function (val, params) {

                //alert to show when validation is triggered
                alert("validation function was called");

                //change validation rule depending on whether cancel button was clicked
               if(params.Canceled == true)
                   return true;
                else
                   return false;

            },
            message: 'This field is required',
            params: {Canceled:this.Canceled()}
        }
    });


    this.errors = ko.validation.group(this);

    //function triggered on submit which checks for validation
    this.submit = function() {
        if(this.errors().length != 0)
            this.errors.showAllMessages();
        else
            alert("no errors detected");
    };

    //function to cancel validation rules
    this.cancelValidation = function() {
        this.Canceled(true);
    };
}

// Activate knockout.js
ko.applyBindings(new AppViewModel());

这是我的 HTML

Name: <input type="text" data-bind="value: Name"/><br/><br/>
<button data-bind="click: submit">submit</button> <button data-bind="click: cancelValidation">Cancel validation</button>

如果单击“取消验证”按钮，我要做的是在运行时更改验证规则。为此，我使用了一个自定义验证函数以及一个名为“Canceled”的 ko.observable 变量。根据“Canceled”的值，我的验证器函数返回真或假。我遇到的问题是验证功能在页面加载时只运行一次。当“Canceled”的值发生变化时，该函数不会重新运行。这是正常行为吗？当我更改“Canceled”的值时，有没有办法让我重新运行当前模型的验证功能？

这是一个尝试代码的小提琴。我在验证函数中添加了一个警报，以表明它只在页面加载时运行一次。

http://jsfiddle.net/eewJe/

【问题讨论】：

标签： javascript knockout.js knockout-validation

【解决方案1】：

您应该将 observable 而不是值传递给选项。改变

if(params.Canceled == true)

到

if(params.Canceled() == true)

并传入 observable。改变

params: {Canceled:this.Canceled()}

到

params: {Canceled:this.Canceled}

这是更新后的小提琴： http://jsfiddle.net/nEPNC/

【讨论】：

【解决方案2】：

没关系，我可以自己解决。对于任何偶然发现这个问题的人，这是我更新的 Javascript

// enable validation
ko.validation.init();


// View model
function AppViewModel() {

    var self = this;

    this.Canceled = ko.observable(false);

    this.Name = ko.observable("").extend({

        //custom validation
        validation: {
            validator: function (val,para) {

                //alert to show when validation is triggered
                alert("validation function was called");

                //change validation rule depending on whether cancel button was clicked
               if(self.Canceled() == true)
                   return true;
                else
                   return false;

            },
            message: 'This field is required'
        }
    });


    this.errors = ko.validation.group(this);

    //function triggered on submit which checks for validation
    this.submit = function() {
        if(this.errors().length != 0)
            this.errors.showAllMessages();
        else
            alert("no errors detected");
    };

    //function to cancel validation rules
    this.cancelValidation = function() {
        this.Canceled(true);
    };
}

// Activate knockout.js
ko.applyBindings(new AppViewModel());

我更改了验证器函数以直接检查 self.Canceled() 的值，而不是像使用验证器的“params:”属性之前那样将 Canceled 作为参数传递。现在一切正常。这是一个更新的小提琴

http://jsfiddle.net/HtYCw/

如果有人有更好的方法，我仍然会对 cmets 感兴趣。

【讨论】：