什么是 knockout-validation？
knockout-validation 是一个用于 Knockout.js 库的前端验证插件。它通过自定义验证规则和消息、异步验证等功能，提供了强大且灵活的验证能力。
安装和使用
你可以在 npm 上安装 knockout-validation：
npm install knockout-validation
然后在你的项目中引入它：
var ko = require('knockout');
require('knockout-validation');或者在 HTML 文件中直接引入它：
<script src="https://cdn.jsdelivr.net/npm/knockout-validation"></script>
基本用法
首先，为了使用 knockout-validation，你需要在定义 ViewModel 时使用 ko.validatedObservable 替换 ko.observable 或 ko.observableArray ，从而创建可验证的 observable 对象。
var viewModel = {
firstName: ko.validatedObservable(''),
lastName: ko.validatedObservable(''),
email: ko.validatedObservable('')
};然后，你可以通过调用 extend 方法来添加验证规则和消息：
viewModel.firstName.extend({ required: true });
viewModel.lastName.extend({ required: true });
viewModel.email.extend({ required: true, email: true });以上代码将对 firstName 和 lastName 进行必填验证，对 email 进行必填和电子邮件格式验证。
最后，在提交表单或执行其他操作之前，你需要检查验证结果是否有效。你可以简单地调用 isValid 方法来检查整个 ViewModel 是否有效，或者调用 errors 方法来获取单个属性的错误消息列表：
if (viewModel.isValid()) {
// 执行提交操作
} else {
viewModel.errors.showAllMessages();
}自定义验证规则和消息
除了内置的验证规则和消息之外，你还可以通过 validation.rules 和 validation.messages 对象扩展自定义的验证规则和消息。
例如，以下代码将添加一个名为 passwordStrength 的验证规则，它将检查密码是否包含大写字母、小写字母和数字，且长度为至少 8 个字符：
ko.validation.rules['passwordStrength'] = {
validator: function (value) {
return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(value);
},
message: '密码必须包含大写字母、小写字母和数字，且长度至少为 8 个字符'
};然后，你可以在 ViewModel 中使用这个新的验证规则：
viewModel.password = ko.validatedObservable('').extend({ passwordStrength: true });如果需要对语言进行国际化，你也可以通过修改 validation.localize 对象来定制消息的本地化。例如，以下代码将修改电子邮件验证规则的默认消息：
ko.validation.localize({
email: '请输入正确的电子邮件地址'
});异步验证
有时，验证某些属性可能需要异步操作（例如从服务器请求数据）。knockout-validation 提供了异步验证的支持，你可以使用 async 规则并提供一个异步验证函数。
例如，以下代码将添加一个名为 uniqueEmail 的异步验证规则，它将检查电子邮件地址是否唯一：
-- -------------------- ---- -------
---------------------------------- - -
------ -----
---------- -------- ------- ------- --------- -
-- ------------
--------------------- - ------ ----- -- -------- -------- -
--------------- --- ------
---
--
-------- ---------------------
--然后，你可以在 ViewModel 中使用这个新的异步验证规则：
viewModel.email.extend({ uniqueEmail: true });示例代码
最后，以下是一个完整的示例代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>knockout-validation 示例</title > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/35450) ，转载请注明来源 [https://www.javascriptcn.com/post/35450](https://www.javascriptcn.com/post/35450)