MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在

简介:

在大部分网站里,用户名都是唯一的,即当用户注册时,如果用户输入的名字不合法,我们需要提示用户,让用户再起个新名字,而这种复杂的验证一般是通过JS来实现的,如果把它集成到ko里,那就完美了.有了这个想法,我开始尝试它,相信一定可以成功的!

起初在设计时出现了很多问题,如ajax异步问题,延时处理问题,ajax返回值问题等等,经过几次失败后,在总结了相关知识后,终于设计出来了一个不错的扩展,即 ajaxData验证方式.

扩展ko.validation.js代码

  kv.rules['ajaxData'] = {
        validator: function (val, ajaxMethod) {
            var result = true;
            $.when(ajaxMethod(val)).then(function (data) {
                result = kv.utils.isEmptyVal(val) || data; //val为空走reqired逻辑,不为空再走ajax逻辑
            });
            return result;
        },
        message: 'Please enter info is no corrent.'
    };

HTML代码

function existUser(name) {
            return $.ajax({ //必须加return才可以将它返回
                url: "/ef/IsNotExist?name=" + name,
                type: "get",
                dataType: "json",
                async: false,
                success: function (data) {
                    return data;
                }
            });
        }

调用方式

            self.UserName = ko.observable().extend({
                minLength: 2,
                maxLength: { params: 30, message: "名称最大长度为30个字符" },
                required: {
                    params: true,
                    message: "请输入名称"
                },
                ajaxData: {
                    params: existUser,
                    message: "用户已经存在"
                }
            });

运行后的效果如图

最后要说明的一点是,目前ajax只能使用同步方式,因为在ko.validation内部有一个机制,如果程序没有返回,那么验证会返回false,即验证失败,如对于异步请求来说,它不会阻塞当前线程的执行,所以,它会直接输出false,而不走我们的验证程序.

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在,如需转载请自行联系原博主。

目录
相关文章
|
16天前
|
设计模式 消息中间件 监控
构建高效可扩展的微服务架构
【5月更文挑战第31天】随着企业应用的复杂性增加,传统的单体架构已难以满足快速迭代与高可用性的需求。本文将探讨如何通过微服务架构实现系统的模块化、动态扩展和容错能力,以及在构建过程中需要注意的核心原则和常见模式。我们将从微服务的定义出发,深入其设计理念,并通过案例分析展示如何在现实世界中实现一个高效且可扩展的微服务系统。
|
3天前
|
存储 关系型数据库 数据库
数据的反规范化架构
【6月更文挑战第13天】 本文介绍数据库设计包括规范化和反规范化。优化设计和应用规范化规则确保高效且准确的数据存储。
30 2
数据的反规范化架构
|
9天前
|
弹性计算 运维 监控
构建高效可扩展的后端服务架构
在当今数字化时代,构建高效可扩展的后端服务架构是企业成功的关键之一。本文将探讨如何设计和实施一种可靠、高性能的后端架构,以满足不断增长的用户需求和复杂的业务逻辑。通过采用合适的技术栈、优化数据库设计、实现弹性伸缩和监控等关键策略,我们能够打造出稳定可靠、高效可扩展的后端服务系统。
|
10天前
网络编程中的互联网协议 , IP地址 , 域名 , 端口 , 架构 , 网页数据请求 , 响应码
网络编程中的互联网协议 , IP地址 , 域名 , 端口 , 架构 , 网页数据请求 , 响应码
|
11天前
|
存储 缓存 NoSQL
了解Redis,第一弹,什么是RedisRedis主要适用于分布式系统,用来用缓存,存储数据,在内存中存储那么为什么说是分布式呢?什么叫分布式什么是单机架构微服务架构微服务的本质
了解Redis,第一弹,什么是RedisRedis主要适用于分布式系统,用来用缓存,存储数据,在内存中存储那么为什么说是分布式呢?什么叫分布式什么是单机架构微服务架构微服务的本质
|
17天前
|
Web App开发 JavaScript Cloud Native
构建高效可扩展的RESTful API:Node.js与Express框架实践指南构建未来:云原生架构在企业数字化转型中的关键作用
【5月更文挑战第29天】 在数字化时代的驱动下,后端服务架构的稳定性与效率成为企业竞争力的关键。本文深入探讨了如何利用Node.js结合Express框架构建一个高效且可扩展的RESTful API。我们将从设计理念、核心模块、中间件应用以及性能优化等方面进行系统性阐述。通过实例引导读者理解RESTful接口设计的最佳实践,并展示如何应对大规模并发请求的挑战,确保系统的高可用性与安全性。
|
17天前
|
存储 监控 持续交付
构建高效可扩展的微服务架构
【5月更文挑战第30天】在数字化转型的浪潮中,企业需要快速响应市场变化并持续交付价值。本文将探讨如何通过构建高效可扩展的微服务架构来满足这一需求。我们将讨论微服务架构的核心原则、优势以及如何在组织中实施这种架构,以实现敏捷性和可维护性的提升。
|
19天前
|
Kubernetes API 开发者
构建高效可扩展的微服务架构:后端开发的新趋势
【5月更文挑战第28天】 在数字化转型的浪潮中,企业对软件系统的要求越来越高。微服务架构因其灵活性、可扩展性和敏捷性而成为解决复杂系统问题的热门选择。本文深入探讨了微服务架构的设计原则、关键技术和实施策略,旨在为后端开发者提供构建和维护高效微服务系统的实用指南。通过对容器化、服务发现、API网关等技术的剖析,揭示了如何优化系统性能、提高可靠性并简化运维流程。
|
20天前
|
消息中间件 存储 API
构建高效可扩展的微服务架构:后端开发的新范式
【5月更文挑战第27天】在数字化转型的浪潮中,微服务架构已成为企业构建灵活、敏捷且可扩展的后端系统的关键策略。本文将深入探讨微服务架构的核心概念、设计原则和实施步骤,以及它如何帮助开发者解决传统单体应用所面临的挑战。我们将通过分析微服务的优势,包括其对复杂系统的模块化处理、独立部署能力以及技术多样性的支持,来展示如何利用这一架构模式提升后端开发的效率和系统的可靠性。
|
Web App开发 JSON 前端开发
ExtJS4.1:AJAX提交数据的三种方式,80%人都没用过第三种
原文 http://www.cnblogs.com/happyframework/archive/2013/04/27/3046810.html 参考资料 HTTP:https://zh.wikipedia.
1043 0