这个框架比较冷门,百度上相关的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>
相关推荐
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 ...
前端项目-knockout-validation,A KnockoutJS Plugin for model and property validation
knockout和knockout.mapping 和knockout.validation联合使用
如果您正在使用 Knockout.validation 并希望使用引导工具提示而不是自动生成的跨度显示您的错误消息,这里有一个用于此的淘汰赛自定义绑定。 见。
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) ...
kv-es6-docs 一个使用 ES6 和 Knockout 创建的简单应用程序,用于浏览 Knockout-Validation 文档。应用结构应用程序的主要部分: src包含使应用程序(脚本、样式等) src/app包含制作应用程序部分(页面、组件等)的...
我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法,例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值和...ko.validation.rules['money'] = { validator:
我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题。如果用户提交的数据不合法,例如格式不正确、非数字类型、超过最大长度、是否必填项、最大值...ko.validation.rules['money'] = { validator: fun
敲除验证-amd 用于淘汰验证或 require.js 的 amd 包装器
评估这是包含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 ...
jQuery Widgets for PC, Mobile and Touch Devices jQuery Widgets for PC and ...jqxknockout.js: Knockout integration plug-in jqxresponse.js: Response plug-in jqxangular.js: AngularJS integration plug-in
java版app源码安装 ChiTu Store 一个开源的电商混合 ...validation) requirejs 项目生成 本项目是使用 Grunt 来生成项目,所以需要安装 Grunt 。 下载源码 安装 Grunt 运行 npm install 命令,安装所
Angular、Backbone、Knockout 和 Ember)来利用 Java EE 的核心优势。 它是一个 Java EE 7 服务器端应用程序,带有一个 AngularJS 前端,包括一个聊天应用程序(由 WebSocket 提供支持)和一个待办事项列表应用程序...