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

时间:2013-01-02 16:58:09

标签: javascript knockout.js knockout-validation

我正在使用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>​

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

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

http://jsfiddle.net/eewJe/

2 个答案:

答案 0 :(得分:1)

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

if(params.Canceled == true)

if(params.Canceled() == true)

并传递可观察的内容。变化

params: {Canceled:this.Canceled()}

params: {Canceled:this.Canceled}

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

答案 1 :(得分:0)

没关系,我能够自己解决这个问题。对于任何绊倒这个问题的人来说,这是我更新的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/

如果有人有更好的方法,我仍然会对评论感兴趣。