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月前
|
运维 负载均衡 微服务
|
前端开发 测试技术 数据处理
Kotlin教程笔记 - MVP与MVVM架构设计的对比
Kotlin教程笔记 - MVP与MVVM架构设计的对比
478 4
|
存储 前端开发 Java
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
275 2
|
存储 编解码 搜索推荐
文生图架构设计原来如此简单之社区与共享机制
工作流共享是文生图应用社区建设的核心功能,它使用户能够分享创作经验和技巧,形成知识共享生态。工作流序列化与存储设计需要解决复杂工作流的高效表示问题。
328 10
|
存储 监控 算法
公司监控上网软件架构:基于 C++ 链表算法的数据关联机制探讨
在数字化办公时代,公司监控上网软件成为企业管理网络资源和保障信息安全的关键工具。本文深入剖析C++中的链表数据结构及其在该软件中的应用。链表通过节点存储网络访问记录,具备高效插入、删除操作及节省内存的优势,助力企业实时追踪员工上网行为,提升运营效率并降低安全风险。示例代码展示了如何用C++实现链表记录上网行为,并模拟发送至服务器。链表为公司监控上网软件提供了灵活高效的数据管理方式,但实际开发还需考虑安全性、隐私保护等多方面因素。
346 0
公司监控上网软件架构:基于 C++ 链表算法的数据关联机制探讨
|
SQL Java 数据库连接
Mybatis架构原理和机制,图文详解版,超详细!
MyBatis 是 Java 生态中非常著名的一款 ORM 框架,在一线互联网大厂中应用广泛,Mybatis已经成为了一个必会框架。本文详细解析了MyBatis的架构原理与机制,帮助读者全面提升对MyBatis的理解和应用能力。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
Mybatis架构原理和机制,图文详解版,超详细!
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
|
10月前
|
Cloud Native Serverless API
微服务架构实战指南:从单体应用到云原生的蜕变之路
🌟蒋星熠Jaxonic,代码为舟的星际旅人。深耕微服务架构,擅以DDD拆分服务、构建高可用通信与治理体系。分享从单体到云原生的实战经验,探索技术演进的无限可能。
微服务架构实战指南:从单体应用到云原生的蜕变之路