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

目录
相关文章
|
28天前
|
前端开发 测试技术 数据处理
Kotlin教程笔记 - MVP与MVVM架构设计的对比
Kotlin教程笔记 - MVP与MVVM架构设计的对比
49 4
|
28天前
|
存储 前端开发 Java
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
26 2
|
1月前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
22天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
15天前
|
弹性计算 API 持续交付
后端服务架构的微服务化转型
本文旨在探讨后端服务从单体架构向微服务架构转型的过程,分析微服务架构的优势和面临的挑战。文章首先介绍单体架构的局限性,然后详细阐述微服务架构的核心概念及其在现代软件开发中的应用。通过对比两种架构,指出微服务化转型的必要性和实施策略。最后,讨论了微服务架构实施过程中可能遇到的问题及解决方案。
|
25天前
|
Cloud Native Devops 云计算
云计算的未来:云原生架构与微服务的革命####
【10月更文挑战第21天】 随着企业数字化转型的加速,云原生技术正迅速成为IT行业的新宠。本文深入探讨了云原生架构的核心理念、关键技术如容器化和微服务的优势,以及如何通过这些技术实现高效、灵活且可扩展的现代应用开发。我们将揭示云原生如何重塑软件开发流程,提升业务敏捷性,并探索其对企业IT架构的深远影响。 ####
40 3
|
1月前
|
Cloud Native 安全 数据安全/隐私保护
云原生架构下的微服务治理与挑战####
随着云计算技术的飞速发展,云原生架构以其高效、灵活、可扩展的特性成为现代企业IT架构的首选。本文聚焦于云原生环境下的微服务治理问题,探讨其在促进业务敏捷性的同时所面临的挑战及应对策略。通过分析微服务拆分、服务间通信、故障隔离与恢复等关键环节,本文旨在为读者提供一个关于如何在云原生环境中有效实施微服务治理的全面视角,助力企业在数字化转型的道路上稳健前行。 ####
|
15天前
|
Java 开发者 微服务
从单体到微服务:如何借助 Spring Cloud 实现架构转型
**Spring Cloud** 是一套基于 Spring 框架的**微服务架构解决方案**,它提供了一系列的工具和组件,帮助开发者快速构建分布式系统,尤其是微服务架构。
128 68
从单体到微服务:如何借助 Spring Cloud 实现架构转型
|
17天前
|
设计模式 负载均衡 监控
探索微服务架构下的API网关设计
在微服务的大潮中,API网关如同一座桥梁,连接着服务的提供者与消费者。本文将深入探讨API网关的核心功能、设计原则及实现策略,旨在为读者揭示如何构建一个高效、可靠的API网关。通过分析API网关在微服务架构中的作用和挑战,我们将了解到,一个优秀的API网关不仅要处理服务路由、负载均衡、认证授权等基础问题,还需考虑如何提升系统的可扩展性、安全性和可维护性。文章最后将提供实用的代码示例,帮助读者更好地理解和应用API网关的设计概念。
45 8
|
1月前
|
Dubbo Java 应用服务中间件
服务架构的演进:从单体到微服务的探索之旅
随着企业业务的不断拓展和复杂度的提升,对软件系统架构的要求也日益严苛。传统的架构模式在应对现代业务场景时逐渐暴露出诸多局限性,于是服务架构开启了持续演变之路。从单体架构的简易便捷,到分布式架构的模块化解耦,再到微服务架构的精细化管理,企业对技术的选择变得至关重要,尤其是 Spring Cloud 和 Dubbo 等微服务技术的对比和应用,直接影响着项目的成败。 本篇文章会从服务架构的演进开始分析,探索从单体项目到微服务项目的演变过程。然后也会对目前常见的微服务技术进行对比,找到目前市面上所常用的技术给大家进行讲解。
50 1
服务架构的演进:从单体到微服务的探索之旅
下一篇
DataWorks