在ASP.NET MVC中使用Knockout實踐06，自定義驗證、非同步驗證

在上一篇中體驗了Knockout.Validation的基本驗證，本篇體驗自定義驗證和非同步驗證。

 

自定義驗證規則

 

ko.validation有一個rules屬性，專門用來存放驗證規則，它是一個鍵值對集合型別，key就是自定義驗證規則的名稱，value是一個json物件。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .validationMessage {
        color: red;
    }
</style>
<input data-bind="value: name, valueUpdate: 'afterkeydown'"/><br/>
@section scripts
{
    <script src="~/Scripts/knockout-2.2.0.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <script src="~/Scripts/zh-CN.js"></script>
    <script type="text/javascript">
        //自定義驗證規則
        ko.validation.rules["myCustomValidation"] = {
            validator: function(val, otherVal) {
                return val == otherVal;
            },
            message: '輸入值必須和{0}相等'
        };
        //註冊自定義規則
        ko.validation.registerExtenders();
        //使用建構函式建立一個View Model
        var User = function() {
            this.name = ko.observable().extend({
                myCustomValidation: 3
            });
        };
        //建立例項
        var user = new User();
        //繫結
        ko.applyBindings(user);
        $(function() {
        });
    </script>
}

 

還可以把自定義規則以匿名函式的形式放在extend方法之內，還可以同時註冊多個自定義驗證規則。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .validationMessage {
        color: red;
    }
</style>
<input data-bind="value: name, valueUpdate: 'afterkeydown'"/><br/>
@section scripts
{
    <script src="~/Scripts/knockout-3.2.0.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <script src="~/Scripts/zh-CN.js"></script>
    <script type="text/javascript">
        //使用建構函式建立一個View Model
        var User = function () {
            this.name = ko.observable().extend({
                validation: [{
                    validator: function (val, someOtherVal) {
                        return val == someOtherVal;
                    },
                    message: '必須是 5',
                    params: 5
                }]
            });
        };
        //建立例項
        var user = new User();
        //繫結
        ko.applyBindings(user);
        $(function () {
        });
    </script>
}

 

 

自定義非同步驗證規則

 

假設，現在需要根據前臺輸入的Product的Id來判斷是否存在。

在HomeController中提供一個根據id判斷是否存在的Action方法，返回json格式。

       static readonly IProductRepository repository = new ProductRepository();
        ......
        [HttpPost]
        public JsonResult JudgeProduct(int id)
        {
            //獲取所有記錄
            var allProducts = repository.GetAll();
            //獲取所有的ids
            IEnumerable<int> ids = from p in allProducts
                select p.Id;
            if (ids.Contains(id))
            {
                return Json(new {msg = true});
            }
            else
            {
                return Json(new { msg = false });
            }
        }

 

前臺需要給View Model例項註冊非同步驗證規則。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    .validationMessage {
        color: red;
    }
</style>
<input data-bind="value: id, valueUpdate: 'afterkeydown'"/><br/>
@section scripts
{
    <script src="~/Scripts/knockout-3.2.0.js"></script>
    <script src="~/Scripts/knockout.validation.js"></script>
    <script src="~/Scripts/zh-CN.js"></script>
    <script type="text/javascript">
        //使用建構函式建立一個View Model
        var Product = function () {
            this.id = ko.observable();
            this.isExist = ko.validatedObservable(true);           
        };
     
        //建立例項
        var product = new Product();
        //給例項成員註冊自定義驗證邏輯
        product.id.subscribe(function () {
            $.post('@Url.Action("JudgeProduct","Home")', { id: product.id() }, function (data) {
                product.isExist(data.msg);
            });
        });
        //給例項成員實施驗證
        product.id.extend({
            validation: {
                validator: function (val, param) {
                    return product.isExist();
                },
                message: "資料庫中沒有此款產品"
            }
        });
       
        //繫結
        ko.applyBindings(product);
        $(function () {
        });
    </script>
}

 

以上，通過subscribe方法，給Product的例項欄位id註冊了一個自定義驗證規則，向服務端傳送POST請求，把返回的結果賦值給Prouct的例項欄位isExist。再給Product的例項欄位id擴充套件自定義驗證規則，返回Product例項欄位isExist的值，如果為true，表示驗證通過，反之，驗證不通過。