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架构，

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

 返回目录