使用 knockoutjs 时 Chrome 中的最大长度约束验证异常

Question

<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 中，它按预期工作，当我们用旧值加载页面时，它在开始时变红（验证）。

Answer 1

这看起来不像是淘汰赛。

<input value='my longname' maxlength="3" />

在 chome 中也不显示错误。

这是一个淘汰赛解决方法。

首先创建一个 hasError computed obseable。

 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

更多 eloquent 解决方案可以通过自定义绑定实现：http://knockoutjs.com/documentation/custom-bindings.html

或扩展器http://knockoutjs.com/documentation/extenders.html

请联系我们了解更多详情。

使用 knockoutjs 时 Chrome 中的最大长度约束验证异常

Maxlength constraint validation oddity in Chrome when using knockoutjs

html

css

validation

google-chrome

knockout.js