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

简介:

2000元阿里云代金券免费领取,2核4G云服务器仅664元/3年,新老用户都有优惠,立即抢购>>>


阿里云采购季(云主机223元/3年)活动入口:请点击进入>>>,


阿里云学生服务器(9.5元/月)购买入口:请点击进入>>>,

上一讲中,我以一个实际中的例子说明了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系列之验证信息自定义输出~续,如需转载请自行联系原博主。

目录
相关文章
|
5天前
|
缓存 监控 数据格式
信息系统架构模型(2) SOA
信息系统架构模型(2) SOA
27 0
|
2天前
|
前端开发 Android开发
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
|
5天前
|
前端开发
MVVM LiveData+DataBinding+Lifecycle+ViewModel架构
MVVM LiveData+DataBinding+Lifecycle+ViewModel架构
14 1
|
5天前
|
前端开发 Java PHP
信息系统架构模型(1) MVC
信息系统架构模型(1) MVC
25 0
|
5天前
|
设计模式 前端开发 数据库
构建高效Android应用:使用Jetpack架构组件实现MVVM模式
【4月更文挑战第21天】 在移动开发领域,构建一个既健壮又易于维护的Android应用是每个开发者的目标。随着项目复杂度的增加,传统的MVP或MVC架构往往难以应对快速变化的市场需求和复杂的业务逻辑。本文将探讨如何利用Android Jetpack中的架构组件来实施MVVM(Model-View-ViewModel)设计模式,旨在提供一个更加模块化、可测试且易于管理的代码结构。通过具体案例分析,我们将展示如何使用LiveData, ViewModel, 和Repository来实现界面与业务逻辑的分离,以及如何利用Room数据库进行持久化存储。最终,你将获得一个响应迅速、可扩展且符合现代软件工
27 0
|
5天前
|
XML 前端开发 测试技术
安卓架构模式:MVC、MVP、MVVM及更多
【4月更文挑战第13天】本文探讨了安卓应用开发中的常见架构模式,包括MVC、MVP和MVVM,以及VIPER和Clean Architecture。MVC分离关注点,易于理解,但安卓不直接支持。MVP通过呈现器实现更清晰的分层和便于单元测试。MVVM利用数据绑定简化UI逻辑,适合声明式编程。开发者应根据项目需求、团队技能和维护周期选择合适架构,随着工具和框架的进步,未来将提供更多模块化、可测试性和敏捷性的解决方案。
|
2天前
|
消息中间件 分布式计算 中间件
秀出天际!阿里甩出的988页分布式微服务架构进阶神仙手册我粉了
秀出天际!阿里甩出的988页分布式微服务架构进阶神仙手册我粉了
|
1天前
|
运维 监控 Docker
使用Docker进行微服务架构的部署
【5月更文挑战第18天】本文探讨了如何使用Docker进行微服务架构部署,介绍了Docker的基本概念,如容器化平台和核心组件,以及它与微服务的关系。通过Docker,每个微服务可独立运行在容器中,便于构建、测试和部署。文章详细阐述了使用Docker部署微服务的步骤,包括定义服务、编写Dockerfile、构建镜像、运行容器、配置服务通信、监控和日志管理以及扩展和更新。Docker为微服务提供了可移植、可扩展的解决方案,是现代微服务架构的理想选择。
|
2天前
|
敏捷开发 监控 API
构建高效微服务架构:从理论到实践
【5月更文挑战第18天】 在当今快速发展的软件开发领域,微服务架构已经成为一种流行的设计模式,它通过将大型应用程序分解为一系列小型、独立的服务来提高系统的可伸缩性、弹性和维护性。本文旨在探讨如何从理论走向实践,构建一个高效的微服务架构。文章首先介绍微服务的基本概念和优势,然后详细讨论了在设计和部署微服务时需要考虑的关键因素,包括服务划分、通信机制、数据一致性、容错处理和监控策略。最后,结合具体案例分析,展示如何在现实世界中应用这些原则,确保微服务架构的高效运行。
|
2天前
|
存储 弹性计算 运维
探索微服务架构下的服务治理
【5月更文挑战第18天】 在当今软件工程领域,微服务架构因其灵活性、可扩展性以及促进团队协作等优势而受到广泛青睐。然而,随着系统规模的增长和服务数量的膨胀,服务治理成为确保系统稳定性和高效性的关键因素。本文将深入探讨微服务环境下的服务治理实践,包括服务发现、配置管理、负载均衡、故障处理等关键方面,旨在为开发者提供一套行之有效的服务治理策略。
http://www.vxiaotou.com