这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我们需要将验证的消息输出到指定的元素上!
在写这个文章之前,我一直没有找到好的办法来实现这种功能,但我没有放弃,终于今天找到了比较不错的解决方案,对于一个元素的验证我们可以使用isValid()方法,而对于它的错误消息的显示,我们可以使用error()方法,注意是error()不是errors(),从这一点上我们可以看到,它是针对某点元素来说的,因为它是单数,呵呵.
功能实现
Html代码
<div class="fcs-item clearfix">
<p class="thd"><span class="rstar">*</span> 班级圈名称：</p>
<p class="t-name">
<input class="cname" style="width: 356px;" type="text" name="Title" data-bind="value:title" />
</p>
<p class="item-warn" data-bind="visible:!title.isValid(),text:title.error()"></p>
<p class="item-warn item-r" data-bind="visible:title.isValid()"> </p>
</div>
<div class="fcs-item clearfix">
<p class="thd"><span class="rstar">*</span> 班级圈价格：</p>
<p class="t-name">
<input class="cname" style="width: 356px;" type="text" name="price" data-bind="value:price" />
</p>
<p class="item-warn" data-bind="visible:!price.isValid(),text:price.error()"></p>
<p class="item-warn item-r" data-bind="visible:price.isValid()"> </p>
</div>
JS代码
var model = function () {
$(".validationMessage").hide();//关闭自动输出功能
var self = this;
self.id = ko.observable('@Model.TeacherInfoExtID');
self.title = ko.observable('@Model.Title').extend({
required: { params: true, message: "请输入班级圈名称" },
minLength: { params: 1, message: "班级圈名称最少为1个字" },
maxLength: { params: 20, message: "班级圈名称最多为20个字" }
});
self.price = ko.observable('@Model.TeacherPrice.Price').extend({
required: { params: true, message: "请输入班级圈价格" },
min: { params: 300, message: "班级圈价格最小为300" },
max: { params: 500, message: "班级圈价格最大为500" }
});
};
var M = new model();
ko.applyBindings(M);
网页载图
![]()
本文转自博客园张占岭（仓储大叔）的博客，原文链接：MVVM架构~knockoutjs系列之验证信息自定义输出，如需转载请自行联系原博主。
