【发布时间】：2017-02-20 21:35:25
【问题描述】：
这是验证两个输入字段 firstname 和 lastname 的示例，both 字段是必需的
查看
<p data-bind="css: { error: firstName.hasError }">
FirstName :<input data-bind='value: firstName, valueUpdate: "afterkeydown"' required />
<span data-bind='visible: firstName.hasError, text: firstName.validationMessage' > </span>
</p>
<p data-bind="css: { error: lastName.hasError }">
LastName : <input data-bind='value: lastName, valueUpdate: "afterkeydown"' required/>
<span data-bind='visible: lastName.hasError, text: lastName.validationMessage'> </span>
</p>
视图模型
ko.extenders.required = function(target, overrideMessage) {
//add some sub-observables to our observable
target.hasError = ko.observable();
target.validationMessage = ko.observable();
//define a function to do validation
function validate(newValue) {
target.hasError(newValue ? false : true);
target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
}
//initial validation
validate(target());
//validate whenever the value changes
target.subscribe(validate);
//return the original observable
return target;
};
function AppViewModel(first, last) {
this.firstName = ko.observable(first).extend({ required: "Please enter a first name" });
this.lastName = ko.observable(last).extend({ required: "" });
}
ko.applyBindings(new AppViewModel("Bob","Smith"));
CSS
.error
{
background-color: #f5f5f5;
}
我尝试在JSFiddle 中运行此代码。但它不起作用，即使是初始值也没有显示在输入字段中，FirstName 和 LastName。我无法找出错误。
【问题讨论】：
标签： javascript html css knockout.js