MVVM架構~Knockoutjs系列之驗證機制的引入 - lori－IT工程師數位筆記本

文章出處

對于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>