MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等

简介:

在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章不同,需要有两个参数,其一是远程方法的签名(JS方法),其二是已知要比较的数据(可能是加密后的密码数据),当用户输入文字后,它将会调用JS方法获取远程数据,以比较原数据与你输入的数据是否匹配.

知识点:以对象作为参数进行传递

ko.validation.js的扩展

   //ajax相等验证
    kv.rules['ajaxDataEqual'] = {
        validator: function (val,params) {
            var result = true;//默认为验证通过
            $.when(params.ajaxMethod(val)).then(function (data) {
                result = kv.utils.isEmptyVal(val) || data == kv.utils.getValue(params.otherValue); //val为空走reqired逻辑,不为空再走ajax逻辑
            });
            return result;
        },
        message: 'Two value must equal.'
    };

HTML代码

<form id="form1" style="width: 800px;">
    <div class="editor-label">
        提现金额:
    </div>
    <div class="editor-field" style="width: 700px">
        <input name="Money" data-bind='value: Money' />
        <span class="validationError" data-bind="validationMessage:Money"></span>
    </div>
    <div class="editor-label">
        支付密码:
    </div>
    <div class="editor-field" style="width: 700px">
        <input name="Paypassword" data-bind='value: Paypassword' />
        <span class="validationError" data-bind="validationMessage:Paypassword"></span>
    </div>
    <p>
        <input type="button" data-bind="click:cash" value="提现" />
    </p>
</form>

相关JS调用时的代码

<script type="text/ecmascript">
        function getpassword(key) {
            return $.ajax({
                url: "/ef/GetPayPassword",
                data: { key: key },
                type: "get",
                dataType: "json",
                async: false,
                success: function (data) {
                    return data;
                }
            });
        }
        var userWithdraw = function () {

            var self = this;
            ko.validation.configure({//ko.validation相关配置
                insertMessages: false
            });

            self.Money = ko.observable().extend({
                min: { params: 1, message: "金额最小为1..." },
                max: { params: 1000, message: "金额最大为1000..." },
                required: {
                    params: true,
                    message: "请输入提现金额..."
                }
            });

            self.Paypassword = ko.observable().extend({

                ajaxDataEqual: { params: { ajaxMethod: getpassword, otherValue: "zzl123" }, message: "支付密码不正确..." },//注意,这只是个实例,说明ajaxDataEqual的用法,实现中,密码不应该保留到前端
                required: {
                    params: true,
                    message: "请输入支付密码..."
                }
            });

            self.cash = function () {
                self.errors = ko.validation.group(self);
                if (self.isValid()) {
                    alert("可以进行提现")
                } else {

                    self.errors.showAllMessages();
                }
            }
        }
        ko.applyBindings(new userWithdraw());
    </script>

最后程序运行的结果

本实例可以帮助我们完成类似支付,提现等功能模块的验证工作.

对于上面的业务大家可能会有些疑惑,怎么把密码暴露到前端了,当然这只是个实例,在项目中,我们应该使用ajaxData进行真假值的验证,密码的验证应该放到后端的方法里,下面是项目中的代码

   self.Paypassword = ko.observable().extend({
                ajaxData: { params: confirmPassword, message: "支付密码不正确..." },
                required: {
                    params: true,
                    message: "请输入支付密码..."
                }
            });
   function confirmPassword(key) {
            return $.ajax({
                url: "/ef/ConfirmPassword",
                data: { key: key },
                type: "get",
                dataType: "json",
                async: false,
                success: function (data) {
                    return data;
                }
            });
        }

下面是C#后端代码,完成了密码的验证

  /// <summary>
        /// 得到用户的支付密码
        /// 只返回真假值,不返回加密后的密码
        /// </summary>
        /// <param name="userid"></param>
        /// <returns></returns>
        public JsonResult ConfirmPassword(string key)
        {
            string oldPassword = "zzl123";//! 这个密码一般是通过当前登陆ID从数据库里查询出来的,不会暴露在前端
            if (key == oldPassword)
                return Json(true, JsonRequestBehavior.AllowGet);
            else
                return Json(false, JsonRequestBehavior.AllowGet);
        }

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

目录
相关文章
|
30天前
|
关系型数据库 分布式数据库 数据库
【PolarDB开源】PolarDB与微服务架构的融合:灵活扩展与高效管理
【5月更文挑战第23天】阿里云PolarDB是适用于微服务的高性能分布式数据库,提供数据分片、水平扩展及高可用性解决方案。通过SQL或API实现弹性扩展,内置故障转移保障服务连续性,且兼容MySQL协议,易于集成微服务生态。通过Spring Boot示例展示了PolarDB的配置与集成过程,强调其在现代云原生应用中的重要角色。
35 1
|
22天前
|
设计模式 消息中间件 监控
构建高效可扩展的微服务架构
【5月更文挑战第31天】随着企业应用的复杂性增加,传统的单体架构已难以满足快速迭代与高可用性的需求。本文将探讨如何通过微服务架构实现系统的模块化、动态扩展和容错能力,以及在构建过程中需要注意的核心原则和常见模式。我们将从微服务的定义出发,深入其设计理念,并通过案例分析展示如何在现实世界中实现一个高效且可扩展的微服务系统。
|
15天前
|
弹性计算 运维 监控
构建高效可扩展的后端服务架构
在当今数字化时代,构建高效可扩展的后端服务架构是企业成功的关键之一。本文将探讨如何设计和实施一种可靠、高性能的后端架构,以满足不断增长的用户需求和复杂的业务逻辑。通过采用合适的技术栈、优化数据库设计、实现弹性伸缩和监控等关键策略,我们能够打造出稳定可靠、高效可扩展的后端服务系统。
|
28天前
|
敏捷开发 消息中间件 存储
构建高效可扩展的微服务架构:后端开发的新范式
【5月更文挑战第25天】在当今快速迭代的软件开发环境中,微服务架构已成为实现敏捷开发、持续部署和高可用性的关键策略。本文将深入探讨微服务的概念、其设计原则以及如何构建一个既高效又可扩展的后端系统。我们将通过实际案例分析,揭示在采用微服务架构时可能遇到的挑战以及解决方案,为后端开发者提供一套实用的指导框架。
|
1月前
|
设计模式 负载均衡 数据管理
构建高效可扩展的微服务架构:后端开发的新趋势
随着数字化转型的加速,企业对后端系统的要求越来越高。本文探讨了如何构建一个既高效又可扩展的微服务架构,以满足快速变化的市场需求。我们将从微服务的核心概念出发,分析其设计原则,并讨论在实现过程中面临的挑战以及应对策略。文章还将展示通过采用微服务架构,企业如何获得更好的业务敏捷性和技术创新能力。
|
26天前
|
消息中间件 存储 API
构建高效可扩展的微服务架构:后端开发的新范式
【5月更文挑战第27天】在数字化转型的浪潮中,微服务架构已成为企业构建灵活、敏捷且可扩展的后端系统的关键策略。本文将深入探讨微服务架构的核心概念、设计原则和实施步骤,以及它如何帮助开发者解决传统单体应用所面临的挑战。我们将通过分析微服务的优势,包括其对复杂系统的模块化处理、独立部署能力以及技术多样性的支持,来展示如何利用这一架构模式提升后端开发的效率和系统的可靠性。
|
28天前
|
监控 安全 API
构建高效可扩展的微服务架构
【5月更文挑战第25天】 随着数字化转型的加速,企业需要构建更加灵活、可扩展的系统以应对不断变化的市场需求。微服务架构作为一种创新的软件开发模式,以其独立性、灵活性和可伸缩性成为解决复杂系统问题的有效途径。本文将深入探讨如何构建一个高效且可扩展的微服务架构,涵盖关键设计原则、技术选型以及实践案例,旨在为开发者和企业提供实用的参考和指导。
|
23天前
|
Web App开发 JavaScript Cloud Native
构建高效可扩展的RESTful API:Node.js与Express框架实践指南构建未来:云原生架构在企业数字化转型中的关键作用
【5月更文挑战第29天】 在数字化时代的驱动下,后端服务架构的稳定性与效率成为企业竞争力的关键。本文深入探讨了如何利用Node.js结合Express框架构建一个高效且可扩展的RESTful API。我们将从设计理念、核心模块、中间件应用以及性能优化等方面进行系统性阐述。通过实例引导读者理解RESTful接口设计的最佳实践,并展示如何应对大规模并发请求的挑战,确保系统的高可用性与安全性。
|
23天前
|
存储 监控 持续交付
构建高效可扩展的微服务架构
【5月更文挑战第30天】在数字化转型的浪潮中,企业需要快速响应市场变化并持续交付价值。本文将探讨如何通过构建高效可扩展的微服务架构来满足这一需求。我们将讨论微服务架构的核心原则、优势以及如何在组织中实施这种架构,以实现敏捷性和可维护性的提升。
|
25天前
|
Kubernetes API 开发者
构建高效可扩展的微服务架构:后端开发的新趋势
【5月更文挑战第28天】 在数字化转型的浪潮中,企业对软件系统的要求越来越高。微服务架构因其灵活性、可扩展性和敏捷性而成为解决复杂系统问题的热门选择。本文深入探讨了微服务架构的设计原则、关键技术和实施策略,旨在为后端开发者提供构建和维护高效微服务系统的实用指南。通过对容器化、服务发现、API网关等技术的剖析,揭示了如何优化系统性能、提高可靠性并简化运维流程。