MVVM架构~Knockoutjs系列之验证机制的引入

简介:

对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.validation.js,用它来实现对HTML标记的验证,

下面是它在Github上的地址https://github.com/Knockout-Contrib/Knockout-Validation。这个插件的使用很类似MVC自己的验证,如果你自己手动扩展过它的ValidationAttribute,那么你对下面的JS肯定不会

感到陌生,思想是一样的,JS里的Validation也是面向对象的,也支持override,比如系统为非空验证提供的提供是“This field is required.”,你当然可以重写它,让它显示“请输入用户名”,呵呵,这个很简单,下面

看一下某体的代码:

首先要引入这两个JS文件

  <script src="~/Scripts/knockout-2.1.0.js"></script>
  <script src="~/Scripts/knockout.validation.min.js"></script>

下面的例子中,分别对用户名,分类ID,价格,Email地址做了数据有效性的验证,并且每个验证中的参数都可以以JS对象或者属性的形式存在,这也足够灵活了,如果是JS对象的话,那么params表示参数的值,而message

表示提示的信息,看一下它的实现(很面向对象的,呵呵)。

<script type="text/ecmascript">
    var Product = function () {
        var self = this;

        self.CategoryId = ko.observable().extend({
            required: true
        });

        self.price = ko.observable().extend({
            required: { params: true, message: "请输入价格" },
            min: { params: 1, message: "请输入大于1的整数" },
            max: 100
        });

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

        self.Email = ko.observable().extend({
            required: {
                params: true,
                message: "Please enter your email"
            },
            email: {
                params: true,
                message: "The format is not correct"
            }
        });



        self.Register = function () {
            self.errors = ko.validation.group(self);
            if (self.isValid()) {
                alert('data sent');
            } else {
                self.errors.showAllMessages();
            }
        };



    }
    var viewModel = new Product();
    ko.applyBindings(viewModel);

</script>

下面再看一下HTML部分,它与之前讲的knockout数据绑定没有区别

<fieldset>
        <legend>添加商品</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            <input data-bind='value: name' />
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.price)
        </div>
        <div class="editor-field">
            <input data-bind='value: price' /><!-- uniqueName: true表示表单的name是唯一的-->
            <div class="editor-label">
                @Html.LabelFor(model => model.CategoryId)
            </div>
        </div>
        <div class="editor-field">
            <input data-bind='value: CategoryId' />
        </div>
        <p>
            <input type="button" value="Create" data-bind="click:Register" />
        </p>
    </fieldset>

事实上,比上面的知识更重要的是,我认为还是它的思想,这样东西都可以由前台工程师去开发,然底层开发人员(asp,.net,php,jsp,ios,android)不需要去干预这些,它们只要写好JS文件去调用自己的方法即可,当然JS文件也可以以前台工程师去写,只不

过,这需要前台工程师等底层工程师把接口写好后,再开发了,呵呵。

看一下效果:

怎么样,有点MVC的味道吧,呵呵,这个前台validation的表现可以由CSS工程师去搞定,不过,一般这活都是前台工程师的,嗨,前台工程师要负责的东西可真不少PS切图,HTML代码编写,JS代码编写,CSS样式编写,还有如果是MVVM架构,

他们还要了解数据库结构,呵,在这里,让我代表所有开发人员说一声:“前台工程师,你们辛苦了”!

本文转自博客园张占岭(仓储大叔)的博客,原文链接:MVVM架构~Knockoutjs系列之验证机制的引入,如需转载请自行联系原博主。

目录
相关文章
|
11天前
|
SQL Java 数据库连接
Mybatis架构原理和机制,图文详解版,超详细!
MyBatis 是 Java 生态中非常著名的一款 ORM 框架,在一线互联网大厂中应用广泛,Mybatis已经成为了一个必会框架。本文详细解析了MyBatis的架构原理与机制,帮助读者全面提升对MyBatis的理解和应用能力。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
Mybatis架构原理和机制,图文详解版,超详细!
|
19天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
21天前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
在 Android 开发中,选择合适的架构模式对于构建中大型项目至关重要。常见的架构模式有 MVVM、MVP、MVI、Clean Architecture 和 Flux/Redux。每种模式都有其优缺点和适用场景,例如 MVVM 适用于复杂 UI 状态和频繁更新,而 Clean Architecture 适合大型项目和多平台开发。选择合适的架构应考虑项目需求、团队熟悉度和可维护性。
48 6
|
1天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
25天前
|
存储 Dart 前端开发
flutter鸿蒙版本mvvm架构思想原理
在Flutter中实现MVVM架构,旨在将UI与业务逻辑分离,提升代码可维护性和可读性。本文介绍了MVVM的整体架构,包括Model、View和ViewModel的职责,以及各文件的详细实现。通过`main.dart`、`CounterViewModel.dart`、`MyHomePage.dart`和`Model.dart`的具体代码,展示了如何使用Provider进行状态管理,实现数据绑定和响应式设计。MVVM架构的分离关注点、数据绑定和可维护性特点,使得开发更加高效和整洁。
152 3
|
22天前
|
前端开发 Java 测试技术
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
30 0
|
13天前
|
缓存 负载均衡 JavaScript
探索微服务架构下的API网关模式
【10月更文挑战第37天】在微服务架构的海洋中,API网关犹如一座灯塔,指引着服务的航向。它不仅是客户端请求的集散地,更是后端微服务的守门人。本文将深入探讨API网关的设计哲学、核心功能以及它在微服务生态中扮演的角色,同时通过实际代码示例,揭示如何实现一个高效、可靠的API网关。
|
12天前
|
Cloud Native 安全 数据安全/隐私保护
云原生架构下的微服务治理与挑战####
随着云计算技术的飞速发展,云原生架构以其高效、灵活、可扩展的特性成为现代企业IT架构的首选。本文聚焦于云原生环境下的微服务治理问题,探讨其在促进业务敏捷性的同时所面临的挑战及应对策略。通过分析微服务拆分、服务间通信、故障隔离与恢复等关键环节,本文旨在为读者提供一个关于如何在云原生环境中有效实施微服务治理的全面视角,助力企业在数字化转型的道路上稳健前行。 ####
|
12天前
|
Dubbo Java 应用服务中间件
服务架构的演进:从单体到微服务的探索之旅
随着企业业务的不断拓展和复杂度的提升,对软件系统架构的要求也日益严苛。传统的架构模式在应对现代业务场景时逐渐暴露出诸多局限性,于是服务架构开启了持续演变之路。从单体架构的简易便捷,到分布式架构的模块化解耦,再到微服务架构的精细化管理,企业对技术的选择变得至关重要,尤其是 Spring Cloud 和 Dubbo 等微服务技术的对比和应用,直接影响着项目的成败。 本篇文章会从服务架构的演进开始分析,探索从单体项目到微服务项目的演变过程。然后也会对目前常见的微服务技术进行对比,找到目前市面上所常用的技术给大家进行讲解。
29 1
服务架构的演进:从单体到微服务的探索之旅
|
10天前
|
消息中间件 监控 安全
后端架构演进:从单体到微服务####
在数字化转型的浪潮中,企业应用的后端架构经历了从传统单体架构到现代微服务架构的深刻变革。本文探讨了这一演进过程的背景、驱动力、关键技术及面临的挑战,揭示了如何通过微服务化实现系统的高可用性、扩展性和敏捷开发,同时指出了转型过程中需克服的服务拆分、数据管理、通信机制等难题,为读者提供了一个全面理解后端架构演变路径的视角。 ####
27 8
下一篇
无影云桌面