我正在处理验证,并使用 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:
基本上,数据绑定(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/