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系列之验证信息自定义输出,如需转载请自行联系原博主。

目录
相关文章
Kotlin教程笔记 - MVP与MVVM架构设计的对比
Kotlin教程笔记 - MVP与MVVM架构设计的对比
178 4
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
61 2
建筑施工一体化信息管理平台源码,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
智慧工地云平台是专为建筑施工领域打造的一体化信息管理平台,利用大数据、云计算、物联网等技术,实现施工区域各系统数据汇总与可视化管理。平台涵盖人员、设备、物料、环境等关键因素的实时监控与数据分析,提供远程指挥、决策支持等功能,提升工作效率,促进产业信息化发展。系统由PC端、APP移动端及项目、监管、数据屏三大平台组成,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
167 7
后端服务架构的微服务化转型
本文旨在探讨后端服务从单体架构向微服务架构转型的过程,分析微服务架构的优势和面临的挑战。文章首先介绍单体架构的局限性,然后详细阐述微服务架构的核心概念及其在现代软件开发中的应用。通过对比两种架构,指出微服务化转型的必要性和实施策略。最后,讨论了微服务架构实施过程中可能遇到的问题及解决方案。
云原生时代的应用架构演进:从微服务到 Serverless 的阿里云实践
云原生技术正重塑企业数字化转型路径。阿里云作为亚太领先云服务商,提供完整云原生产品矩阵:容器服务ACK优化启动速度与镜像分发效率;MSE微服务引擎保障高可用性;ASM服务网格降低资源消耗;函数计算FC突破冷启动瓶颈;SAE重新定义PaaS边界;PolarDB数据库实现存储计算分离;DataWorks简化数据湖构建;Flink实时计算助力风控系统。这些技术已在多行业落地,推动效率提升与商业模式创新,助力企业在数字化浪潮中占据先机。
105 12
云计算的未来:云原生架构与微服务的革命####
【10月更文挑战第21天】 随着企业数字化转型的加速,云原生技术正迅速成为IT行业的新宠。本文深入探讨了云原生架构的核心理念、关键技术如容器化和微服务的优势,以及如何通过这些技术实现高效、灵活且可扩展的现代应用开发。我们将揭示云原生如何重塑软件开发流程,提升业务敏捷性,并探索其对企业IT架构的深远影响。 ####
129 3
云原生架构下的微服务治理与挑战####
随着云计算技术的飞速发展,云原生架构以其高效、灵活、可扩展的特性成为现代企业IT架构的首选。本文聚焦于云原生环境下的微服务治理问题,探讨其在促进业务敏捷性的同时所面临的挑战及应对策略。通过分析微服务拆分、服务间通信、故障隔离与恢复等关键环节,本文旨在为读者提供一个关于如何在云原生环境中有效实施微服务治理的全面视角,助力企业在数字化转型的道路上稳健前行。 ####
从单体到微服务:如何借助 Spring Cloud 实现架构转型
**Spring Cloud** 是一套基于 Spring 框架的**微服务架构解决方案**,它提供了一系列的工具和组件,帮助开发者快速构建分布式系统,尤其是微服务架构。
431 69
从单体到微服务:如何借助 Spring Cloud 实现架构转型

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等