这个框架比较冷门，百度上相关的API比较少，找了好多天，写了一个简单的Demo，首先列出验证常用的方法：
以下方法来源：http://www.cnblogs.com/lori/p/3593807.html?utm_source=tuicool&utm_medium=referral
为空验证：
self.CategoryId = ko.observable().extend({
required: true
});
最大最小值验证：
self.price = ko.observable().extend({
required: { params: true, message: "请输入价格" },
min: { params: 1, message: "请输入大于1的整数" },
max: 100
});
长度验证：
self.name = ko.observable().extend({
minLength: 2,
maxLength: { params: 30, message: "名称最大长度为30个字符" },
required: {
params: true,
message: "请输入名称",
}
});
电话验证：
self.phone = ko.observable().extend({
phoneUS: {
params: true,
message: "电话不合法",
}
});
邮箱验证：
self.Email = ko.observable().extend({
required: {
params: true,
message: "请填写Email"
},
email: {
params: true,
message: "Email格式不正确"
}
});
数字验证：
self.age = ko.observable().extend({
number: {
params: true,
message: "必须是数字",
}
});
相等验证：
self.PayPassword = ko.observable().extend({
required: {
params: true,
message: "请填写支付密码"
},
equal:{
params:"zzl",
message:"支付密码错误"
}
});
然后是我自己写的一个简易Demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>吃兔纸不吐毛</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="knockout-3.3.0.js"></script>
<script type="text/javascript" src="knockout.validation.min.js" ></script>
<style type="text/css">
b {color: red;}
</style>
</head>
<body>
<table>
<tr>
<td>账号：</td>
<td><input type="text" data-bind="value:username, validationElement: username" /></td>
<td><b data-bind="validationMessage: username"></b></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" data-bind="value:password, validationElement: password" /></td>
<td><b data-bind="validationMessage: password"></b></td>
</tr>
<tr>
<td><button data-bind="click:submitClick" >提交</button></td>
<td><b id="result" style="display:none">提交成功</b></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
ko.validation.init({
decorateElement: false,
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
parseInputAttributes: true,
messageTemplate: null,
errorClass : 'error'
});
var viewModel = {
username: ko.observable().extend({
//required为空验证
required: { params: true, message: '请输入账号' },
minLength: { params: 6, message: "账号名称太短" }
}),
//这里贴了两种写法，这里的验证不定义message都会显示默认信息
password: ko.observable().extend({ required: { message: '请输入密码' } }).extend({ minLength: 7, maxLength: 10 }),
submitClick: function () {
if (viewModel.errors().length == 0) {
//通过验证
$("#result").css("display", "block");
return true;
} else {
viewModel.errors.showAllMessages();
return false;
}
}
};
viewModel.errors = ko.validation.group(viewModel);
ko.applyBindings(viewModel);
</script>
</body>
</html>
相关推荐
**前端项目-knockout-validation.zip** 是一个包含KnockoutJS验证插件的前端开发资源包，主要用于在基于KnockoutJS的项目中实现模型和属性的验证功能。KnockoutJS是一个流行的JavaScript库，它提供了MVVM（Model-...
https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.js https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.min.js jsdelivr ...
此外，可以使用`ko.validation.group(viewModel).isValid()`检查整个表单是否有效，或者`ko.validation.group(viewModel).showAllMessages(false)`在需要时显示所有错误信息。 通过这样的组合，`WebApp`项目可以...
而**Knockout.validation** 是一个与Knockout.js配套使用的验证插件，它提供了模型验证的功能，帮助开发者确保输入的数据符合预设的规则。 **Bootstrap** 是一个流行的前端开发框架，用于快速构建响应式、移动优先...
在"knockout-userform"项目中，可能会用到Knockout的验证插件，如knockout-validation，用于验证用户输入的数据，确保它们符合预期的格式或规则。 **7. 观察者模式** Knockout.js基于观察者模式，当ViewModel中的...
为了将验证错误展示给用户，我们可以利用`ko.validation.group`或`ko.validation.group(model, { deep: true })`来创建一个验证组，并监听其`errors`属性的变化。一旦有验证失败，我们可以将错误消息显示在相应的...
Knockout.Validation (by Dan Ludwig) Knockout.Viewmodel (by Oisin Grehan) ko.editables (by Oisin Grehan) KoLite (by Boris Yankov) Leaflet (by Vladimir) Libxmljs (by François de Campredon) ...
Knockout-validation-amd 是一个专门针对 Knockout.js 框架的验证插件，它提供了 AMD（Asynchronous Module Definition）模块化加载机制，以便在使用 Require.js 或其他遵循 AMD 规范的模块加载器时能更好地整合和...
kv-es6-docs 一个使用 ES6 和 Knockout 创建的简单应用程序，用于浏览 Knockout-Validation 文档。应用结构应用程序的主要部分： src包含使应用程序（脚本、样式等） src/app包含制作应用程序部分（页面、组件等）的...
5. ** Knockout.js 的扩展和插件**：项目可能使用了一些社区开发的扩展和插件，比如 Knockout-Validation 用于验证用户输入，或者 Knockout-Router 用于管理应用程序的路由。 **应用场景** 在SXSW这样的大型活动中...
验证（Validation）** 虽然Knockout本身不包含内置的验证功能，但可以通过插件轻松添加。这些插件允许你定义验证规则，并在用户输入时实时反馈错误信息。 **8. 动态模板** Knockout支持动态模板，允许你根据数据...
我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法，例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和...ko.validation.rules['money'] = { validator:
我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法，例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值...ko.validation.rules['money'] = { validator: fun
10. **验证（Validation）**：虽然Knockout自身不包含内置的验证功能，但可以通过扩展实现，比如knockout-validation插件，它可以方便地进行表单验证。 通过压缩包中的"KnockoutJS学习文档.chm"和"knockout.pdf"，...
这可以通过扩展 `ko.validation.rules` 对象来实现。 ```javascript ko.validation.rules['customRule'] = { validator: function (val, otherParam) { // 自定义验证逻辑 return val === otherParam; }, ...
8. **扩展和插件**：Knockout有一个活跃的社区，提供了许多扩展和插件，如knockout-postbox用于跨视图模型通信，knockout-mapping用于JSON到ViewModel的映射，以及knockout-validation用于表单验证。 9. **页面应用...
评估这是包含Oracle Cloud Commerce培训课程的模块2的最终项目的初始模板。... 您的工作是通过重构该模板中可用的静态代码来增加项目的交互性。 目标是通过执行CEP查询并在各自... 使用Knockout-validations验证表单，创
#knockout-simple-validation (ksv) 这是一个简单的 JavaScript 库，用于验证淘汰赛 ( ) 模型。 我的英语很糟糕，因此，欢迎任何修改##依赖 - jquery-1.4.1 or higher- knockout-2.0 or higher- momentjs-2.8 or ...
KnockoutJS可以通过第三方库如knockout-validation来实现表单验证，提供实时的用户输入检查和反馈。 **8. 与其他库和框架的集成** 尽管KnockoutJS本身已经很强大，但它也能很好地与jQuery、AngularJS、React等其他...