0

我正在使用 knokcout.js 和 knockout.validation 插件。我的代码中存在验证消息问题。我在可观察字段（比如密码）上应用了 2 次验证，例如：

在 Js 代码中

..
this.Password = ko.observable().extend({
       required: { message: "Enter password" },
       minLength: { params: 6, message: "Must be 6 chars long" }
});
..

在 HTML 中

<input type="password" data-bind="value: Password, valueUpdate:'afterkeypress"
  placeholder="Password" />

现在我的问题是，当我在密码字段中输入单个字符而不是显示验证消息(Must be 6 chars long)时，它会显示消息(Enter password)，而不是当我在字段中输入第二个字符时，它会显示消息(Must be 6 chars long)。这种行为适用于我应用验证的所有字段。谁能告诉我问题出在哪里？

4

1 回答 1

1

该代码似乎对“按键”而不是“按键后”做出反应。您在示例 html 中的“afterkeypress”之后缺少单引号。

该文档并未真正将“afterkeypress”列为 updateValue 选项，但在我的测试中似乎确实有效。

来自值绑定的文档

如果您的绑定还包括一个名为 valueUpdate 的参数，则这定义了 KO 应该使用的其他浏览器事件来检测除了更改事件之外的更改。以下字符串值是最常用的选择：

  • "keyup" - 当用户释放一个键时更新你的视图模型
  • "keypress" - 当用户输入一个键时更新你的视图模型。与 keyup 不同，这会在用户按住键时重复更新
  • “afterkeydown” - 一旦用户开始输入字符，就会更新您的视图模型。这是通过捕获浏览器的 keydown 事件并异步处理事件来实现的。

在这些选项中，如果您想实时更新视图模型，“afterkeydown”是最佳选择。

文档建议使用“afterkeydown”选项以获得最佳效果，我发现确实如此。

我创建了一个使用“keypress”、“afterkeypress”和“afterkeydown”的示例。

见： http: //jsbin.com/anerop/3/edit （validatedObservable；注意：点击“Run with js”按钮）

绑定到“afterkeydown”似乎提供了最好的用户体验。在控件失去焦点之前，'afterkeypress' 不会更新。

示例数据绑定：

<input type="password" data-bind="value: Password, valueUpdate:'afterkeydown'"
  placeholder="Password" />

我创建了另一个没有使用 validObservable 的示例并得到了类似的结果。

见： http: //jsbin.com/itatic/1/edit （未验证Observable；注意：点击“用js运行”按钮）

于 2013-02-21T06:30:50.587 回答