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

简介:

对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是"整理近可能多的架构方式",这样才可以自由的应变.

对于表单验证,我今天看了新浪的邮箱注册,觉得效果还可以,所以,就写了一个,它利用了knockoutjs里的hasfocus属性,对文本框进行焦点捕捉来实现的.

新浪截图

 

说明:表单元素为焦点时,自动提示要输入的信息,当元素失去焦点时,提示用户输出的正确性,这个功能使用了hasfocus属性,下面看一下代码

HTML代码

<div class="editor-label">
        账号:
    </div>
    <div class="editor-field">
        <input data-bind='value: name,validationElement:name,hasfocus:selName' />
        <span class="validationWarn" data-bind="visible:selName">请输入用户名账号,它由字母汉字数字组成.</span>
        <span data-bind="visible:!selName()"><span class="validationError" data-bind="validationMessage:name"></span></span>
        <span data-bind="visible:!selName()"><span class="validationSuccess" data-bind="visible:name.isValid()"></span></span>
    </div>
    <div class="editor-label">
        Email:
    </div>
    <div class="editor-field">
        <input data-bind='value: Email,hasfocus:selEmail' />
        <span data-bind="visible:!selEmail()"><span class="validationError" data-bind="validationMessage:Email"></span></span>
        <span class="validationWarn" data-bind="visible:selEmail">请输入你的Email.</span>
        <span data-bind="visible:!selEmail()"><span class="validationSuccess" data-bind="visible:Email.isValid()"></span></span>
    </div>
    <div class="editor-label">
        手机:
    </div>
    <div class="editor-field">
        <input data-bind='value: phone,hasfocus:selPhone' />
        <span data-bind="visible:!selPhone()"><span class="validationError" data-bind="validationMessage:phone"></span></span>
        <span class="validationWarn" data-bind="visible:selPhone">请输入你的电话.</span>
        <span data-bind="visible:!selPhone()"><span class="validationSuccess" data-bind="visible:phone.isValid()"></span></span>
    </div>
    <div style="clear: both;"></div>
    <p>
        <input type="button" value="Create" data-bind="click:Register" />
    </p>

JS代码

     var Product = function () {
            var self = this;

            ko.validation.configure({//ko.validation相关配置
                insertMessages: false,//不自动插入错误消息
                errorElementClass: 'errorElementClass',/*元素的CSS样式*/
                errorMessageClass: 'errorMessageClass',/*提示信息CSS的样式*/
            });

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

            self.phone = ko.observable().extend({
                required: true,
                number: {
                    params: true,
                    message: "电话不合法",
                }
            });
            self.selPhone = ko.observable(false);

            self.Email = ko.observable().extend({
                required: {
                    params: true,
                    message: "请填写Email"
                },
                email: {
                    params: true,
                    message: "Email格式不正确"
                }
            });
            self.selEmail = ko.observable(false);

            self.Register = function () {
                self.errors = ko.validation.group(self);
                if (self.isValid()) {
                    alert("验证成功,数据可以提交");
                } else {

                    self.errors.showAllMessages();
                }
            };
        };
        product = new Product();
        ko.applyBindings(product);

页面截图

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

目录
相关文章
|
9天前
|
缓存 监控 数据格式
信息系统架构模型(2) SOA
信息系统架构模型(2) SOA
28 0
|
1天前
|
前端开发 中间件 程序员
app的组件化之路:业务组件化与中间件,MVVM架构的作用
app的组件化之路:业务组件化与中间件,MVVM架构的作用
5 0
|
7天前
|
前端开发 Android开发
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
Android架构组件JetPack之DataBinding玩转MVVM开发实战(四)
|
9天前
|
前端开发
MVVM LiveData+DataBinding+Lifecycle+ViewModel架构
MVVM LiveData+DataBinding+Lifecycle+ViewModel架构
16 1
|
9天前
|
前端开发 Java PHP
信息系统架构模型(1) MVC
信息系统架构模型(1) MVC
26 0
|
3天前
|
消息中间件 监控 数据管理
构建高效微服务架构:从理论到实践
【5月更文挑战第21天】 在现代软件开发的浪潮中,微服务架构已成为企业追求敏捷开发、持续交付和系统弹性的关键解决方案。本文深入探讨了构建一个高效微服务架构的核心原则与实践策略,旨在为开发者提供一个清晰的指南,帮助他们在设计分布式系统时做出明智的决策。我们将从微服务的基本概念出发,逐步展开对关键组件、通信机制和数据管理的讨论,并分享实际案例分析以验证理论的有效性。
|
1天前
|
存储 监控 持续交付
构建高效微服务架构:从理论到实践
【5月更文挑战第23天】 在当今的软件开发领域,微服务架构已成为一种流行的设计模式,它承诺通过将大型单体应用拆分为一系列小型、自治的服务来提高可扩展性、灵活性和敏捷性。然而,实现这一理念并非没有挑战,它要求开发者们重新思考如何组织代码库、处理数据一致性以及确保服务之间的有效通信。本文将深入探讨构建微服务的最佳实践,包括关键的设计原则、技术选型、持续集成与部署,以及监控和日志策略,旨在为读者提供一套实用的指南,帮助他们在构建自己的微服务系统时避免常见的陷阱。
|
1天前
|
存储 监控 持续交付
构建高效可靠的微服务架构:策略与实践
【5月更文挑战第23天】 在数字化转型的浪潮中,微服务架构以其灵活性、可扩展性成为企业技术选型的宠儿。本文将深入探讨如何构建一个高效可靠的微服务系统,涵盖从设计原则到具体实现的各个关键点。我们将分析微服务的优势,探讨其面临的挑战,并提出一系列解决策略。从服务的划分、治理、到持续集成/持续部署(CI/CD)流程的建立,本文旨在为开发者提供一套全面的微服务架构建设指南。
|
2天前
|
消息中间件 监控 API
构建高效微服务架构是后端开发的关键
【5月更文挑战第22天】构建高效微服务架构是后端开发的关键,涉及核心原则如服务独立、去中心化、自治和轻量级通信。优势包括可扩展性、独立性、技术灵活性和团队协作。最佳实践包括恰当的服务拆分、选择RESTful API、RPC或消息队列进行通信、处理数据一致性和分布式事务、实施服务治理与监控,以及确保安全性与权限控制。随着技术进步,未来将探索服务网格、容器化和云原生技术,以提升微服务架构的效能和适应性。
12 0
|
2天前
|
设计模式 负载均衡 数据管理
构建高效可扩展的微服务架构:后端开发的新趋势
随着数字化转型的加速,企业对后端系统的要求越来越高。本文探讨了如何构建一个既高效又可扩展的微服务架构,以满足快速变化的市场需求。我们将从微服务的核心概念出发,分析其设计原则,并讨论在实现过程中面临的挑战以及应对策略。文章还将展示通过采用微服务架构,企业如何获得更好的业务敏捷性和技术创新能力。