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

简介:

这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用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);

网页载图

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~knockoutjs系列之验证信息自定义输出,如需转载请自行联系原博主。

目录
相关文章
|
1天前
|
前端开发 Android开发
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
|
3天前
|
前端开发
MVVM LiveData+DataBinding+Lifecycle+ViewModel架构
MVVM LiveData+DataBinding+Lifecycle+ViewModel架构
14 1
|
3天前
|
缓存 监控 数据格式
信息系统架构模型(2) SOA
信息系统架构模型(2) SOA
27 0
|
3天前
|
前端开发 Java PHP
信息系统架构模型(1) MVC
信息系统架构模型(1) MVC
24 0
|
3天前
|
设计模式 前端开发 数据库
构建高效Android应用:使用Jetpack架构组件实现MVVM模式
【4月更文挑战第21天】 在移动开发领域,构建一个既健壮又易于维护的Android应用是每个开发者的目标。随着项目复杂度的增加,传统的MVP或MVC架构往往难以应对快速变化的市场需求和复杂的业务逻辑。本文将探讨如何利用Android Jetpack中的架构组件来实施MVVM(Model-View-ViewModel)设计模式,旨在提供一个更加模块化、可测试且易于管理的代码结构。通过具体案例分析,我们将展示如何使用LiveData, ViewModel, 和Repository来实现界面与业务逻辑的分离,以及如何利用Room数据库进行持久化存储。最终,你将获得一个响应迅速、可扩展且符合现代软件工
26 0
|
3天前
|
XML 前端开发 测试技术
安卓架构模式:MVC、MVP、MVVM及更多
【4月更文挑战第13天】本文探讨了安卓应用开发中的常见架构模式,包括MVC、MVP和MVVM,以及VIPER和Clean Architecture。MVC分离关注点,易于理解,但安卓不直接支持。MVP通过呈现器实现更清晰的分层和便于单元测试。MVVM利用数据绑定简化UI逻辑,适合声明式编程。开发者应根据项目需求、团队技能和维护周期选择合适架构,随着工具和框架的进步,未来将提供更多模块化、可测试性和敏捷性的解决方案。
|
21小时前
|
监控 持续交付 开发者
构建高效微服务架构:后端开发的新范式
【5月更文挑战第18天】 随着现代软件开发的复杂性日益增长,传统的单体应用架构已难以满足快速迭代和灵活部署的需求。本文聚焦于一种新兴的解决方案——微服务架构,探讨其如何为后端开发带来革命性的改变。我们将深入分析微服务的核心概念、优势与挑战,并通过具体案例来阐述如何在实际项目中实施微服务架构。文章旨在为开发者提供一种系统化的方法,帮助他们理解并应用微服务架构,以提升系统的可维护性、扩展性和技术敏捷性。
8 2
|
21小时前
|
测试技术 持续交付 API
构建高效的微服务架构:后端开发的现代实践
【5月更文挑战第18天】在数字化转型的浪潮中,微服务架构已成为企业追求敏捷、可扩展和容错能力的关键解决方案。本文将深入探讨微服务的核心概念,包括其设计原则、技术栈选择以及实施过程中的挑战与对策。通过对微服务架构实践的详细剖析,旨在为后端开发人员提供一套构建和维护高效微服务系统的实用指南。
|
21小时前
|
缓存 算法 Apache
微服务架构下的服务发现与注册机制
【5月更文挑战第18天】 随着现代软件系统向着分布式和微服务架构演进,服务发现与注册成为确保系统弹性和可伸缩性的关键因素。本文将探讨在微服务环境下实现服务发现与注册的模式,分析其必要性,并深入讨论常见的解决方案以及面临的挑战。文中不仅介绍了服务发现的基本原理和流程,还对流行的服务发现工具如Consul、Etcd和Zookeeper进行了比较,最后提出了一套优化策略以增强系统的鲁棒性和性能。
|
1天前
|
Kubernetes API 数据库
构建高效微服务架构:后端开发的新趋势
【5月更文挑战第17天】 随着云计算的普及和容器化技术的成熟,微服务架构已成为企业软件开发的首选模式。该架构通过将大型应用程序拆分为一系列小型、自治的服务来提供灵活性和可扩展性。本文将探讨微服务架构的关键概念,包括服务的细粒度划分、独立部署、以及如何通过容器编排实现高可用性。同时,我们将讨论微服务实施的最佳实践和面临的挑战,为后端开发者提供构建和维护微服务系统的实用指南。