javascript - Knockout.js 验证文本框突出显示

标签 javascript knockout.js knockout-validation

我正在处理验证,并使用 knockout.js(和 durandal.js)作为 View 模式。

如果我点击提交按钮,我想在文本框为空白时将其边框设为红色。

当用户开始在文本框中键入内容时,应删除红色边框颜色。

代码在这里:http://jsfiddle.net/LvHUD/1/

我所做的是:

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

最佳答案

Knockout Validation 会向您的可观察对象添加两个可观察对象:isValid 和 isModified。 您可以使用 isValid 可观察来获取您正在寻找的内容。 我稍微修改了 Bradley Trager 提供的 jsfiddle:

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

基本上,数据绑定(bind)属性已更改如下:

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

关于javascript - Knockout.js 验证文本框突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18466766/

相关文章:

javascript - Knockout.js ko.mapping.fromjs 在绑定(bind)中包含一个属性

javascript - KOValidation get observable value, $index(), $data 等错误信息

javascript - 无法让 "If paused"在 vi​​deojs 中工作

javascript - 以匿名函数为父函数的彩票号码生成器

javascript - 引号内的 If...Else 语句

javascript - 是否可以将 child 作为参数传递给 ko 计算函数

javascript - 当我向数组添加新项目时,KnockoutJS 数据消失

javascript - knockout 验证 - isValid() 在值更改后始终为 true

knockout.js - knockout 验证: Dynamic constraints

javascript - DIV 向下滚动时向上移动