MVVM架构~knockoutjs系列之验证信息自定义输出

最新推荐文章于 2018-05-14 15:14:11 发布

转载最新推荐文章于 2018-05-14 15:14:11 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lori/p/3659231.html

本文介绍了一种在前端项目中，如何通过 Knockout.js 实现验证信息输出到指定元素的方法，包括使用 isValid() 和 error() 方法进行元素验证及错误信息展示。

返回目录

这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我们需要将验证的消息输出到指定的元素上!

在写这个文章之前,我一直没有找到好的办法来实现这种功能,但我没有放弃,终于今天找到了比较不错的解决方案,对于一个元素的验证我们可以使用isValid()方法,而对于它的错误消息的显示,我们可以使用error()方法,注意是error()不是errors(),从这一点上我们可以看到,它是针对某点元素来说的,因为它是单数,呵呵.

功能实现

Html代码

<div class="fcs-item clearfix">
    <p class="thd"><span class="rstar">*</span>&nbsp;班级圈名称：</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()">&nbsp;</p>
</div>

<div class="fcs-item clearfix">
    <p class="thd"><span class="rstar">*</span>&nbsp;班级圈价格：</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()">&nbsp;</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);