在ASP.NET MVC中使用Knockout实践05，基本验证

本篇体验View Model验证。Knockout的subscribe方法能为View Model成员注册验证规则。

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}


<style type="text/css">

    .error {

        color: red;

    }

</style>


<input data-bind="value: name, valueUpdate: 'afterkeydown'"/>

<span class="error" data-bind="visible: hasError">最大长度为8！</span>



@section scripts

{

    <script src="~/Scripts/knockout-2.2.0.js"></script>

    <script type="text/javascript">


        //使用构造函数创建一个View Model

        var User = function() {

            this.name = ko.observable("darren");

            this.hasError = ko.observable(false);


            //给name注册一个方法

            this.name.subscribe(function(newValue) {

                this.hasError(newValue && newValue.length > 8);

            }, this);

        };


        ko.applyBindings(new User());

    </script>

}

以上的做法稍显繁琐。其实，使用NuGet上的"Knockout.Validation"是最明智的做法。

通过NuGet安装Knockout.Validation

安装完成后，在Scripts文件夹下多了如下文件。

在Scripts文件夹下创建zh-CN.js，用来汉化。

ko.validation.localize({

    required: '必填字段',

    min: '输入值必须大于等于 {0}',

    max: '输入值必须小于等于 {0}',

    minLength: '至少输入 {0} 个字符',

    maxLength: '输入的字符数不能超过 {0} 个',

    pattern: '请检查此值',

    step: '每次步进值是 {0}',

    email: 'email地址格式不正确',

    date: '日期格式不正确',

    dateISO: '日期格式不正确',

    number: '请输入一个数字',

    digit: '请输入一个数字',

    phoneUS: '请输入一个合法的手机号(US)',

    equal: '输入值不一样',

    notEqual: '请选择另一个值',

    unique: '此值应该是唯一的'

});

Knockout.Validation的基本验证

□ 必填

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}


<style type="text/css">

    .validationMessage {

        color: red;

    }

</style>


<input data-bind="value: name, valueUpdate: 'afterkeydown'"/>


@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">

        //使用构造函数创建一个View Model

        var User = function() {

            this.name = ko.observable("darren").extend({required:true});

        };


        ko.applyBindings(new User());

    </script>

}

□ 最小值

this.name = ko.observable("darren").extend({ min: 2 });

□ 最大值

this.name = ko.observable("darren").extend({ max: 99 });

□ 最小长度

this.name = ko.observable("darren").extend({ minLength: 3 });

□ 最大长度

this.name = ko.observable("darren").extend({ maxLength: 12 });

□ 邮件

this.name = ko.observable("darren").extend({ email: true });

□ 正则表达式

this.name = ko.observable("darren").extend({ pattern: '^[a-z0-9].$' });

□ 相等

var otherObj = ko.observable();
var myObj = ko.observable().extend({ equal: otherObj });

var myObj = ko.observable().extend({ equal: 2 });

□ 不等

var otherObj = ko.observable();
var myObj = ko.observable().extend({ notEqual: otherObj });

var myObj = ko.observable().extend({ notEqual: 2 });

□ 日期

this.name = ko.observable("").extend({ date: true });

□ 数字，包括小数点

this.name = ko.observable("").extend({ number: true });

□ 整型

this.name = ko.observable("").extend({ digit: true });

□ 同时多个验证规则

this.name = ko.observable().extend({
                required: true,
                maxLength: 3
            });

□ 验证View Model实例

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}


<style type="text/css">

    .validationMessage {

        color: red;

    }

</style>


<input data-bind="value: name, valueUpdate: 'afterkeydown'"/><br/>

<button id="btn">提交</button>


@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">

        //使用构造函数创建一个View Model

        var User = function() {

            this.name = ko.observable().extend({

                required: true,

                maxLength: 3

            });

        };


        var user = new User();


        ko.applyBindings(user);

        ko.validatedObservable(user);


        $(function() {

            $('#btn').on("click", function() {

                if (user.isValid) {

                    alert('ok');

                }

            });

        });

    </script>

}

以上，必须先使用ko.validatedObservable方法，然后才能使用isValid方法判断是否验证通过。

参考资料：
https://github.com/Knockout-Contrib/Knockout-Validation/wiki