MVVM架构~knockoutjs系列之验证信息自定义输出
这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用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系列之验证信息自定义输出，如需转载请自行联系原博主。
