Question

我正在使用验证，我正在使用knockout.js（和durandal.js）作为视图模式。

如果单击“提交”按钮，我想将文本框的边框设为空白。

当用户开始输入文本框时，应删除边框颜色为红色。

我做的是：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/knockout.debug.js"></script>
    <script src="Scripts/knockout.js"></script>
    <script src="Scripts/knockout.validation.debug.js"></script>
    <script src="Scripts/knockout.validation.js"></script>
</head>
<body>
    <input type="text" data-bind='value: username' />
    <br />
    <button data-bind="click: submit">Submit</button>
    <div data-bind="visible: showErrors, text: errors" />
    <script>
        function ViewModel() {
            var self = this;
            self.username = ko.observable().extend({
                required: true
            });
            self.showErrors = ko.observable(false);

            self.submit = function () {
                self.showErrors(true);
                if (self.isValid()) {
                    // save data here   
                }
            }

            self.errors = ko.validation.group(self);
        }

        ko.validation.init({
            registerExtenders: true,
            messagesOnModified: true,
            insertMessages: false
        });

        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

Answer 1

您可以使用knockouts css绑定将错误类添加到输入框中：

<input type="text" data-bind="value: username, css:{'error':showErrors}" />

这是jsFiddle：http://jsfiddle.net/bradleytrager/tBcRD/

增加：如果您希望在用户键入时删除突出显示，则执行此操作的一种方法是在按键事件上更新您的observable，并订阅您的observable以便在observable更改时删除错误消息： HTML：

<input type="text" data-bind="value: username, css:{'error':showErrors}, valueUpdate: 'afterkeydown'" />

JS：

self.username.subscribe(function () {
    self.removeErrors();
});
self.removeErrors = function () {
    self.showErrors(false);
};

我使用此功能更新了jsFiddle。

Answer 2

Knockout Validation会增加您的可观察的两个可观察量：isValid＆amp; isModified。您可以使用isValid observable来获取您要查找的内容。我稍微修改了Bradley Trager提供的jsfiddle：

http://jsfiddle.net/tBcRD/3/

基本上，data-bind属性更改如下：

<input type="text" data-bind="value: username, valueUpdate: 'afterkeydown', css:{'error':(!username.isValid() && showErrors())}" />

Answer 3

您可以使用validationElement绑定（wiki）：

http://jsfiddle.net/tBcRD/10/

HTML：

<input type="text" data-bind="value: username, validationElement: username, valueUpdate: 'afterkeydown'" />
<br/>
<button data-bind="click: submit">Submit</button>

JS：

function ViewModel() {
    var self = this;
    self.username = ko.observable().extend({
        required: true
    });

    this.validationModel = ko.validatedObservable({
        username: self.username
    }); 

    self.submit = function () {
        self.username.valueHasMutated();
        if (this.validationModel.isValid()) {
           alert("data saved");
        }
    }
}

ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: false,
    decorateElement: true
});

ko.applyBindings(new ViewModel());

CSS：

.validationElement {
    border: 1px solid red;
}

knockout.js验证文本框突出显示

3 个答案: