带有自定义扩展器和验证的 Knockout 绑定

Question

我正在使用 KnockoutJS 3.2.0 以及最新的 Knockout-Validation 和映射。控制器从模型中向我发送了一个复杂的 JSON 对象。许多人认为效果很好。现在我遇到了第一个更大的问题，直到现在我都无法自己解决。我得到了将我的值转换为欧元字符串的扩展器。我自己的（或 Validations 'max'）扩展程序来检查值。谁能告诉我我犯了什么样的错误？我直接在 HTML 中使用我的扩展器。我不会手动设置扩展器。

我试着为你做了一个非常简单的例子。输入 150 > 显示错误 > 输入 100 > 应该隐藏错误。

我更新了代码。现在错误通知工作正常。但该模型仍然有效。

    ko.validation.rules['maxval'] = {
    validator: function (val, otherVal) {
        var nbr ;
           if(ko.validation.utils.isNumber(val))
           {
               nbr = val;            
           }
           else
           {
               nbr=val.split('€')[0]
           }
        return nbr <= otherVal;
    },
    message: 'Number should greater than or equal to {0} €'
};
ko.extenders.euro = function (target, precision) {                
                var result = ko.dependentObservable({
                    read: function () {
                        //sample                       
                        if(target().toString().indexOf('€') != -1) {
                            return target() ;}
                        else{
                            return target() +" €";}
                    },
                    write: target
                }).extend({
                    notify: 'always'
                });
                result.raw = target;
                return result;
            }; 
ko.validation.registerExtenders();
var data = { num : 100};
var viewModel = ko.validatedObservable(ko.mapping.fromJS(data));
ko.applyBindings(viewModel);

label { display: block; margin-top: 5px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://raw.githubusercontent.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="https://raw.githubusercontent.com/Knockout-Contrib/Knockout-Validation/master/dist/knockout.validation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<fieldset>
    <label>work: <input data-bind="value: num.extend({ euro : 2,maxval : 130})" /></label>
    <label>work: <input data-bind="value: num.extend({ maxval : 130})" /></label>
</fieldset>

 <div>
    <button type="button" data-bind='enable: isValid()'>Submit</button>
    <label>button still valid</label>
</div>

谢谢

Answer 1

那么你应该注意到 onLoad 你的文本框值不是一个数字（100 €）并且你试图与一个数字进行比较 max:130 给你总是假的。

使用自定义验证我们可以有效地处理这个问题

自定义验证规则：

ko.validation.rules['maxval'] = {
    validator: function (val, otherVal) {
        var nbr ;
        if(val) { 
        nbr=val.split('€')[0]
        }
        return nbr <= otherVal;
    },
    message: 'Number should greater than or equal to {0} €'
};

注意：值'130'是传递给验证器的第二个参数（'otherVal'）

注册规则已创建：

ko.validation.registerExtenders();

查看模型：

ko.extenders.euro = function (target, precision) {                
                var result = ko.dependentObservable({
                    read: function () {
                        //sample                       
                        if(target().toString().indexOf('€') != -1) {
                            return target() ;}
                        else{
                            return target() +" €";}
                    },
                    write: target
                }).extend({
                    notify: 'always'
                });
                result.raw = target;
                return result;
            }; 

var data = { num : 100};
var viewModel = ko.validatedObservable(ko.mapping.fromJS(data));
ko.applyBindings(viewModel);

工作fiddlehere

有关 ko 验证的文档 refer here

带有自定义扩展器和验证的 Knockout 绑定

Knockout binding with custom extender and validation

knockout.js

knockout-mapping-plugin

knockout-validation