对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.validation.js,用它来实现对HTML标记的验证,
下面是它在Github上的地址https://github.com/Knockout-Contrib/Knockout-Validation。这个插件的使用很类似MVC自己的验证,如果你自己手动扩展过它的ValidationAttribute,那么你对下面的JS肯定不会
感到陌生,思想是一样的,JS里的Validation也是面向对象的,也支持override,比如系统为非空验证提供的提供是“This field is required.”,你当然可以重写它,让它显示“请输入用户名”,呵呵,这个很简单,下面
看一下某体的代码:
首先要引入这两个JS文件
<script src="~/Scripts/knockout-2.1.0.js"></script> <script src="~/Scripts/knockout.validation.min.js"></script>
下面的例子中,分别对用户名,分类ID,价格,Email地址做了数据有效性的验证,并且每个验证中的参数都可以以JS对象或者属性的形式存在,这也足够灵活了,如果是JS对象的话,那么params表示参数的值,而message
表示提示的信息,看一下它的实现(很面向对象的,呵呵)。
<script type="text/ecmascript"> var Product = function () { var self = this; 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.Email = ko.observable().extend({ required: { params: true, message: "Please enter your email" }, email: { params: true, message: "The format is not correct" } }); self.Register = function () { self.errors = ko.validation.group(self); if (self.isValid()) { alert('data sent'); } else { self.errors.showAllMessages(); } }; } var viewModel = new Product(); ko.applyBindings(viewModel); </script>
下面再看一下HTML部分,它与之前讲的knockout数据绑定没有区别
<fieldset> <legend>添加商品</legend> <div class="editor-label"> @Html.LabelFor(model => model.name) </div> <div class="editor-field"> <input data-bind='value: name' /> </div> <div class="editor-label"> @Html.LabelFor(model => model.price) </div> <div class="editor-field"> <input data-bind='value: price' /><!-- uniqueName: true表示表单的name是唯一的--> <div class="editor-label"> @Html.LabelFor(model => model.CategoryId) </div> </div> <div class="editor-field"> <input data-bind='value: CategoryId' /> </div> <p> <input type="button" value="Create" data-bind="click:Register" /> </p> </fieldset>
事实上,比上面的知识更重要的是,我认为还是它的思想,这样东西都可以由前台工程师去开发,然底层开发人员(asp,.net,php,jsp,ios,android)不需要去干预这些,它们只要写好JS文件去调用自己的方法即可,当然JS文件也可以以前台工程师去写,只不
过,这需要前台工程师等底层工程师把接口写好后,再开发了,呵呵。
看一下效果:
怎么样,有点MVC的味道吧,呵呵,这个前台validation的表现可以由CSS工程师去搞定,不过,一般这活都是前台工程师的,嗨,前台工程师要负责的东西可真不少PS切图,HTML代码编写,JS代码编写,CSS样式编写,还有如果是MVVM架构,
他们还要了解数据库结构,呵,在这里,让我代表所有开发人员说一声:“前台工程师,你们辛苦了”!
本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~Knockoutjs系列之验证机制的引入,如需转载请自行联系原博主。