使用 knockoutjs 时 Chrome 中的 Maxlength 约束验证异常
Posted
技术标签:
【中文标题】使用 knockoutjs 时 Chrome 中的 Maxlength 约束验证异常【英文标题】：Maxlength constraint validation oddity in Chrome when using knockoutjs 【发布时间】：2019-01-27 13:16:30 【问题描述】：这里是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 中，当旧值超过 maxlength 时，在我们编辑输入之前，约束验证不会生效。当我们开始编辑时，它会变红。
在 IE 中它按预期工作，当我们使用旧值加载页面时，它在开始时变为红色（验证）。
【问题讨论】：
【参考方案1】：这看起来不像是淘汰赛问题。
<input value='my longname' maxlength="3" />
在 chome 中也没有显示错误。
这是一个淘汰赛的解决方法。
首先创建一个 hasError 计算的 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
使用自定义绑定可以实现更雄辩的解决方案：http://knockoutjs.com/documentation/custom-bindings.html
或扩展器http://knockoutjs.com/documentation/extenders.html
请与我们联系以获取更多详细信息。
【讨论】：
以上是关于使用 knockoutjs 时 Chrome 中的 Maxlength 约束验证异常的主要内容，如果未能解决你的问题，请参考以下文章
KnockoutJS 映射插件 (observableArray)