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

简介:

上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题的表单元素,这在有些场合是不适合的,有时,我们希望它在被失去焦点时才将错误消息显示出来,而不去输入信息时,它保持一种原始状态,如下面的图:

我们可以看到,它在页面被加载后,显示一些友好的提示消息,而当用户没有按着这种规约输入时,它才会提示您错误的消息,如图:

最后输入正确,我们看到的就是:

 

 

当输入合法后,结果如图:

下面说一下实现代码

HTML核心代码

<div class="editor-label">
        账号:
    </div>
    <div class="editor-field">
        <input data-bind='value: name,validationElement:name' />
        <span class="validationWarn" data-bind="visible:initName">请输入用户名账号,它由字母汉字数字组成</span>
        <span class="validationError" data-bind="validationMessage:name"></span>
        <span class="validationSuccess" data-bind="visible:name.isValid()"></span>
    </div>

其中validationMessage是指定将验证的错误消息进行绑定输出,它比我们上一讲用的error()更好友,它在页面初始化时,不会被执行.isValid()方法是指当前元素是否验证通过,true表示验证通过,反之为出现错误,错误消息会被装载到validationMessage

属性上,initName是我为warn提示建立一个附加对象,是指当页面被初始化时,显示warn信息,而当元素被修改后,显示验证信息或者成功的信息,validationElement表示当前被验证的元素,你在后台为错误消息设置的css类,可以直接反映到时它上面

JS核心代码

ko.validation.configure({//ko.validation相关配置
                insertMessages: false,//不自动插入错误消息
                errorClass: 'error',//指定反映到validationElement对象上
            });

            self.name = ko.observable().extend({
                minLength: 2,
                maxLength: { params: 30, message: "名称最大长度为30个字符" },
                required: {
                    params: true,
                    message: "请输入名称",
                },

            });

            self.initName = ko.observable(!self.name.isValid());
            self.name.subscribe(function (newValue) {
                self.initName(false);
            });

到目前为止,我们的ko.validation讲的就差不多了,在以后的工作中可能还会遇到新的问题,我同样会把它记下来,写出来的,呵呵.

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

目录
相关文章
|
21天前
|
缓存 监控 数据格式
信息系统架构模型(2) SOA
信息系统架构模型(2) SOA
21 0
|
7天前
|
前端开发
MVVM LiveData+DataBinding+Lifecycle+ViewModel架构
MVVM LiveData+DataBinding+Lifecycle+ViewModel架构
13 1
|
21天前
|
前端开发 Java PHP
信息系统架构模型(1) MVC
信息系统架构模型(1) MVC
22 0
|
23天前
|
设计模式 前端开发 数据库
构建高效Android应用:使用Jetpack架构组件实现MVVM模式
【4月更文挑战第21天】 在移动开发领域,构建一个既健壮又易于维护的Android应用是每个开发者的目标。随着项目复杂度的增加,传统的MVP或MVC架构往往难以应对快速变化的市场需求和复杂的业务逻辑。本文将探讨如何利用Android Jetpack中的架构组件来实施MVVM(Model-View-ViewModel)设计模式,旨在提供一个更加模块化、可测试且易于管理的代码结构。通过具体案例分析,我们将展示如何使用LiveData, ViewModel, 和Repository来实现界面与业务逻辑的分离,以及如何利用Room数据库进行持久化存储。最终,你将获得一个响应迅速、可扩展且符合现代软件工
25 0
|
1月前
|
存储 设计模式 前端开发
构建高效安卓应用:Jetpack MVVM 架构的实践之路
【4月更文挑战第9天】 在移动开发的迅猛浪潮中,Android 平台以其开放性和灵活性受到开发者青睐。然而,随着应用复杂度的不断增加,传统的开发模式已难以满足快速迭代和高质量代码的双重要求。本文将深入探讨 Jetpack MVVM 架构模式在 Android 开发中的应用实践,揭示如何通过组件化和架构设计原则提升应用性能,实现数据驱动和UI分离,进而提高代码可维护性与测试性。我们将从理论出发,结合具体案例,逐步展开对 Jetpack MVVM 架构的全面剖析,为开发者提供一条清晰、高效的技术实施路径。
|
1月前
|
移动开发 前端开发 数据管理
构建高效Android应用:采用MVVM架构与LiveData的全面指南
在移动开发领域,构建一个既快速又可靠的应用对于开发者来说至关重要。随着Android Jetpack组件的推出,MVVM(Model-View-ViewModel)架构和LiveData已成为实现响应式、可测试且易于维护应用的首选解决方案。本文将深入探讨如何在Android应用中实施MVVM模式,以及如何利用LiveData来优化UI组件的数据更新流程,确保用户界面与业务逻辑之间的高度解耦和流畅交互。
22 4
|
4天前
|
存储 监控 API
构建高效微服务架构:后端开发的现代实践
【5月更文挑战第9天】 在本文中,我们将深入探讨如何在后端开发中构建一个高效的微服务架构。通过分析不同的设计模式和最佳实践,我们将展示如何提升系统的可扩展性、弹性和维护性。我们还将讨论微服务架构在处理复杂业务逻辑和高并发场景下的优势。最后,我们将分享一些实用的工具和技术,以帮助开发者实现这一目标。
|
23小时前
|
负载均衡 JavaScript Java
构建高效微服务架构:后端开发的新视角
【5月更文挑战第13天】在现代软件开发中,微服务架构已经成为一种流行趋势。它通过将应用程序拆分为一组小型、独立的服务来提高可扩展性、弹性和可维护性。本文将探讨如何构建一个高效的微服务架构,包括选择合适的技术栈、设计良好的服务接口、确保数据一致性以及实现有效的服务发现和负载均衡。
|
1天前
|
监控 Java 开发者
构建高效微服务架构:后端开发的新趋势
【5月更文挑战第13天】随着现代应用的复杂性日益增加,传统的单体应用架构已不足以满足快速迭代和可扩展性的需求。本文将探讨如何通过微服务架构来提升后端开发的效率和系统的可靠性,涵盖微服务设计原则、技术栈选择、部署策略以及维护实践。我们将分析微服务的优势与挑战,并提供一系列实施建议,帮助开发者在构建和维护分布式系统时做出明智决策。
|
1天前
|
监控 持续交付 数据库
构建高效可靠的微服务架构:后端开发的新范式
【5月更文挑战第13天】 在当今软件开发的世界中,微服务架构已经成为了一种流行且有效的设计模式。它通过将大型复杂系统分解为一组独立的、可部署的服务来提高系统的可维护性、可扩展性和敏捷性。本文将探讨如何构建一个高效且可靠的微服务架构,包括关键的设计原则、技术选型以及可能面临的挑战。我们的目标是为后端开发者提供一套实用的指南,以便在构建现代化应用程序时做出明智的决策。