Question

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

我试着为你做一个非常简单的例子。类型150＆gt;显示错误＆gt;类型100＆gt;应该隐藏错误。

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

由于

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} €'
};

注意：值＆＃39; 130＆＃39;是传递给验证器

的第二个arg（＆＃39; otherVal＆＃39;）

注册规则已创建：

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

工作小提琴 here

有关ko验证的文档 refer here

Knockout绑定自定义扩展程序和验证

1 个答案: