这个框架比较冷门,百度上相关的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>