如何使用敲除验证

时间:2014-12-03 13:13:08

标签: javascript knockout.js breeze knockout-validation

我正在关注此link以创建验证。

但我不明白如何在我的代码中使用此扩展方法。

我使用来自调用breeze查询的记录将数据加载到我的observable中。

我以下面的方式加载数据

dataObsArray= ko.observableArray()

datacontext.getData(id,dataObsArray)
                   .then(function () {

          // some logic


 })
        .fail("Data not found");

然后我将这个obs数组绑定到我的视图,如下所示

<tbody data-bind="with: dataObsArraay">
            <tr>
                <td>name</td>
                <td> <input data-bind="  value: Name" ></td>
                <td> <input data-bind="  value: Age" ></td>

            </tr>
</tbody>

所以我不明白我如何使用 extend 方法,因为我只是在我的可观察数组中使用属性绑定我的视图。

请指导我。

2 个答案:

答案 0 :(得分:1)

考虑使用breeze validation而不是通过knockout扩展器将验证逻辑放在UI代码中。使用breeze验证将确保始终评估规则,并且无需为了验证而在实体上创建额外模型。

这是一个使用breeze内置验证器之一的示例:stringLength验证器。

var entityType = entityManager.metadataStore.getEntityType('????'),
    nameProperty = entityType.getProperty('Name'),
    nameLengthValidator = breeze.Validator.stringLength({ maxLength: 10, minLength: 2 });
nameProperty.validators.push(nameLengthValidator);

这是一个自定义的字符串必需验证器示例,它不允许只有空格的值:

// make a reusable validator
var myRequiredValidator = breeze.Validator.makeRegExpValidator(
    "myRequiredValidator",  
    /\S/,  
    "The %displayName% '%value%' cannot be blank or entirely whitespace");

// register it with the breeze Validator class.
breeze.Validator.register(myRequiredValidator);

// add the validator to the Name property...
var entityType = entityManager.metadataStore.getEntityType('????'),
    nameProperty = entityType.getProperty('Name');
nameProperty.validators.push(nameLengthValidator);

这是制作正则表达式验证器的documentation

您也可以编写自定义验证器 - 查看breeze docs以获取更多信息 - 查找编写自定义验证器部分。

答案 1 :(得分:0)

您需要为数据创建一个模型,例如:

function person(name, age) {
    this.name = ko.observable(name).extend({ minLength: 2, maxLength: 10 });
    this.age = ko.observable(age).extend({ min: 18, max: 99 });
}

var data = [],
    people = ko.observableArray();

datacontext.getData(id, data)
    .then(function (data) {
        for (i = 0; i < data.length; i++) {
            people.push(new person(data.Name, data.Age));
        }
    })
    .fail("Data not found");


<tbody data-bind="foreach: people">
    <tr>
        <td>name</td>
        <td> <input data-bind="  value: name" ></td>
        <td> <input data-bind="  value: age" ></td>
    </tr>
</tbody>