标签: knockout-validation

我正在使用Knockout Validation,并按照我的意愿完成所有工作.我在Twitter Bootstrap中使用它,并在遇到错误时设置正确的类.

使用jQuery Validation,我还能够在验证元素通过验证时设置类.例如,您可以在用户输入有效信息时将输入框变为绿色.

使用Knockout验证有没有办法做到这一点？有人有例子吗？

我使用ko.validation检查我的页面上的有效数据,如下所示:

var postcode = ko.observable(),
    name = ko.observable();

var validationModel = ko.validatedObservable({
    postcode: postcode.extend({ required: true }),
    name: name.extend({ required: true })
});

然后在我的确定按钮中,我在提交之前检查验证:

var buttonOk = function () {

    if (!validationModel.isValid()) {
        validationModel.errors.showAllMessages();
        return false;
    }
    ...

它工作得很好:如果用户没有为邮政编码输入内容并且命名验证失败.

现在我添加了一些验证规则:

postcodeMustNotAlreadyExists + denominationMustNotAlreadyExists如下:

var validationModel = ko.validatedObservable({
    postcode: postcode.extend({ required: true }),
    name: name.extend({ required: true })
}).extend({
    postcodeMustNotAlreadyExists: cities,
    denominationMustNotAlreadyExists: cities
});

ko.validation.rules['postcodeMustNotAlreadyExists'] = {
    validator: function (val, cities) {
        // Try to find a match between …

我正在使用淘汰赛,并希望用户在html选择标签中选择一个项目.默认情况下选择空值

<select required>
            <option value="">--Select something</option>
            <option value="True">True</option>
            <option value="False">False</option>

而viewModel包含:

self.sampleBooleanValue.extend({required : true});

我希望以下绑定会有所帮助

<select data-bind="value: sampleBooleanValue" required>

 ....
</select>

验证有效,但没有为选择标记添加css类.任何人都可以告诉为什么这不起作用？PS它适用于其他输入标签.

我想创建一个自定义的淘汰验证规则,该规则将获取当前可观察值,与之比较的值以及条件.

我在网上看到的所有示例都只有两个参数传递到自定义验证中.

我已经做了一个解决方法来传递一个数组,其值为compare和条件,但这有点笨拙.我的消息格式也输出数组中的值,而不仅仅是otherVal.

例如:

/*
* Compares two values only if the specified condition is true.
* Parameters: 
*   array[0] - otherVal
*   array[1] - conditional
*
* Returns:
*   true if the condition is false.
*   true if the condition is true AND val is lessThanOrEqualTo otherVal
*   false otherwise
*
* Usage:
*   Used to validate observables conditionally.
*
* Example:
*   self.salary = ko.observable().extend({ 
                      mustLessThanOrEqualConditional: [100, isFieldEditable]})
*/
ko.validation.rules['mustLessThanOrEqualConditional'] = {
  validator: function(val, array) { …

我的视图模型中有一堆金额是可观察的,我希望它们存储为数字,因为它们用于多次计算.但是,当我将它们绑定到我视图中的文本框时,我希望它们显示为特殊格式的字符串(1234.5678 =>"1,234.57").在这种情况下实现双向绑定的最佳方法是什么,因为我不能只使用与我的observable的值绑定？

用户需要能够在文本框中输入"1,234.56"或"1234.56",这将在observable中存储数字值1234.56,如果我通过javascript更改数值(3450),则需要将文本框值更新为新值,但格式化为字符串("3,450").

我很感激帮助!

我可以将HTML5属性添加到元素中以进行连线验证吗？

如果是这样,它似乎对我不起作用.我需要做些额外的事吗？

http://jsfiddle.net/FcM2A/1/

vm required<input data-bind="value: num1, valueUpdate: 'afterkeydown'"/><br/>
HTML5 required<input required="true" data-bind="value: num2, valueUpdate: 'afterkeydown'" /><br/>
num1 isValid: <span data-bind="text: num1.isValid()"></span><br/>
num2 isValid: <span data-bind="text: num2.isValid()"></span>
<p data-bind="text:ko.toJSON($root)"></p>

ko.validation.init( {parseInputAttributes: true, writeInputAttributes: true} ); //enable HTML5 validation, write HTML5 validation attributes to the controls

var viewModel = {
    num1: ko.observable("1").extend({ required: true }),
    num2: ko.observable("2")
};
ko.applyBindings(viewModel);

我想使用引导样式进行验证消息的KO验证工作.

我有它,以便在内容无效时显示引导验证消息,但它同时显示OOB KO验证消息.

下面是我的代码,我期待这data-bind="validationMessage: Name"将停止显示默认值,但似乎并非如此.我有什么东西可以阻止这种显示吗？

<div class="container">
   <form class="form-horizontal">
        <div class="control-group" data-bind="css: { success: Name.isModified() && Name.isValid(), error: Name.isModified() && !Name.isValid() }">
        <label for="inputName" class="control-label">Name</label>
        <div class="controls">
            <input type="text" id="inputName" placeholder="put something in and then clear" data-bind="value: Name, valueUpdate: 'afterkeydown'">
            <span class="help-inline" data-bind="validationMessage: Name, visible: Name.isModified() && !Name.isValid()"></span>
        </div>
    </div>
       </form>
</div>

和

function ViewModel() {
    var self = this;
    self.Name = ko.observable()
    .extend({ required: true });
    return self;
}
$(function () {
    ko.applyBindings(new ViewModel());
});

JSFiddle在这里:http …

我正在使用Knockout.validation验证我的页面中的输入字段.起初,一切顺利,直到我尝试使用正则表达式.我真的不知道我做错了什么,希望你能帮助我.

以下是我的脚本:

var self = this;
self.MobileNumber = ko.observable().extend({ pattern: { params: "^(?:04\d{2}|\({1}04\d{2}\){1})\s{0,1}(\d{3}(\s{0,1})\d{3})$", message: "Invalid mobile number."} });

以下是我的HTML页面:

<div>
    <input data-bind="value: MobileNumber, valueUpdate: 'blur'" />
</div>
<div>
    <p data-bind="validationMessage: MobileNumber">
    </p>
</div>

我想将消息设置为在knockout的验证函数中显示,类似于此处发生的事情:Knockout Validation Plugin自定义错误消息但没有异步.

继承人我试过的,但没有显示验证消息.

this.name = ko.observable().extend({
    validation: {
        validator: function (val) {
            return { isValid:val === 'a', message: 'the value ' + val + ' is not a' };
        },
        message: 'I dont want this default message'
    }
});

的jsfiddle

有一个很好的方法来做到这一点？

如果我像这样扩展可观察的淘汰赛

var x = ko.observable().
extend({ 
     pattern : { 
         params: someRegex,
         message: "An error"
    }
})
.extend({ 
     pattern : { 
         params: someMoreRegex,
         message: "Another error"
    }
})

这是可观察到的淘汰赛的有效扩展名（即多个模式扩展名）吗？

第二个模式的正则表达式根本没有得到验证。在某些情况下，确实会触发它，但会显示第一个模式错误消息。我最近将表格1.0.2升级到了2.0.3，此功能已经失效，但似乎无法确定为什么它不再起作用。