这里是jsfiddle
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
</head>
<p>First name: <input data-bind="value: firstName" maxlength="3" /></p>
<style>
input:invalid
{
border-color: #e67b7b;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var viewModel =
{ firstName: ko.observable("Ikram")
};
ko.applyBindings(viewModel);
});
</script>
在 Chrome 中，当旧值超过最大长度时，约束验证不会验证，直到我们编辑输入。当我们开始编辑时，它会变成红色。
在IE中，它按预期工作，当我们加载具有旧值的页面时，它会在开始时变为红色(验证(。
这看起来不像是一个淘汰赛问题。
<input value='my longname' maxlength="3" />
在丁目中也没有显示错误。
这是一个淘汰赛解决方法。
首先创建一个 hasError 计算的可观察性。
function hasErrorComputed(){
return viewModel.firstName().length > 3;
}
iewModel.hasError = ko.computed(hasErrorComputed);
然后将 css 绑定到 hasError。
<input data-bind="css: {error: hasError}, value: firstName" maxlength="3" />
这是 jsfiddle
使用自定义绑定可以实现更雄辩的解决方案：http://knockoutjs.com/documentation/custom-bindings.html
或扩展器 http://knockoutjs.com/documentation/extenders.html
请联系了解更多详情。