MVVM架构~Knockoutjs系列之验证机制的引入

时间:2023-03-08 23:17:35
MVVM架构~Knockoutjs系列之验证机制的引入

返回目录

对于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: , message: "请输入大于1的整数" },
max:
}); self.name = ko.observable().extend({
minLength: ,
maxLength: { params: , 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文件也可以以前台工程师去写,只不

过,这需要前台工程师等底层工程师把接口写好后,再开发了,呵呵。

看一下效果:

aaarticlea/png;base64,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" alt="" />

怎么样,有点MVC的味道吧,呵呵,这个前台validation的表现可以由CSS工程师去搞定,不过,一般这活都是前台工程师的,嗨,前台工程师要负责的东西可真不少PS切图,HTML代码编写,JS代码编写,CSS样式编写,还有如果是MVVM架构,

他们还要了解数据库结构,呵,在这里,让我代表所有开发人员说一声:“前台工程师,你们辛苦了”!

返回目录