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: , message: "请输入大于1的整数" },
            max:
        });

        self.name = ko.observable().extend({
            minLength: ,
            maxLength: { params: , 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文件也可以以前台工程师去写，只不

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

看一下效果：

aaarticlea/png;base64,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" alt="" />

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

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

返回目录