MVVM架构~knockoutjs系列之验证成功提示显示

返回目录

对于knockout.validation来说，我们已经知道了如何去验证大部分表单元素，而有时，我们的需求希望在每个元素验证成功后，去显示正确的提示，这个我们很容易的使用self.元素.isValid()方法来实现。

下面给出相关的代码

CSS代码

<style type="text/css">

    .validationMessage {

        background: url("/scripts/Images/l_registWarningIcon01.png") no-repeat scroll 0 12px rgba(0, 0, 0, 0);

        clear: both;

        color: #FF000A;

        height: 26px;

        line-height: 26px;

        padding-left: 20px;

        padding-top: 14px;

        display: inline;

    }



    .validationSuccess {

        background: url("/scripts/Images/l_registWarningIcon02.png") no-repeat scroll 0 12px rgba(0, 0, 0, 0);

        clear: both;

        color: #FF000A;

        height: 26px;

        line-height: 26px;

        padding-left: 20px;

        padding-top: 14px;

        display: inline;

    }



    .validationWarn {

        background: url("/scripts/Images/l_registWarningIcon03.png") no-repeat scroll 0 12px rgba(0, 0, 0, 0);

        clear: both;

        color: #ccc;

        height: 26px;

        line-height: 26px;

        padding-left: 20px;

        padding-top: 7px;

        display: inline;

        float: right;

    }

</style>

JS代码

<script type="text/ecmascript">

    var Product = function () {

        var self = this;



        self.peoplePrice = ko.observable().extend({

            required: true,

            pattern: { params: /^\d+[\.]?\d{0,2}$/g, message: "必须是数字，并且最多两位小数！" }

        });



        self.peoplePrice.subscribe(function (newValue) {

            //  alert(self.peoplePrice.isValid());

        });





        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.phone = ko.observable().extend({

            required: true,

            phoneUS: {

                params: true,

                message: "电话不合法",

            }

        });



        self.age = ko.observable().extend({

            required: true,

            number: {

                params: true,

                message: "必须是数字",

            }

        });



        self.Email = ko.observable().extend({

            required: {

                params: true,

                message: "请填写Email"

            },

            email: {

                params: true,

                message: "Email格式不正确"

            }

        });



        self.realName = ko.observable().extend({

            required: {

                params: true,

                message: "请填写realName"

            }

        });



        self.address = ko.observable().extend({

            required: {

                params: true,

                message: "请填写address"

            }

        });





        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代码

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

<script src="~/Scripts/knockout.validation.min.js"></script>



<fieldset style="width: 600px;">

    <legend>添加商品</legend>

    <div class="editor-label">

        name

    </div>

    <div class="editor-field">

        <input data-bind='value: name' />

        <span class="validationWarn">请输入用户名账号，它由字母汉字数字组成</span>

        <span class="validationSuccess" data-bind="visible:name.isValid()"></span>

    </div>



    <div class="editor-label">

        price

    </div>

    <div class="editor-field">

        <input data-bind='value: price' /><!-- uniqueName: true表示表单的name是唯一的-->

    </div>

    <div class="editor-label">

        CategoryId

    </div>

    <div class="editor-field">

        <input data-bind='value: CategoryId' />

    </div>

    <div class="editor-label">

        Email

    </div>

    <div class="editor-field">

        <input data-bind='value: Email' />

    </div>

    <div class="editor-label">

        Phone

    </div>

    <div class="editor-field">

        <input data-bind='value: phone' />

    </div>

    <div class="editor-label">

        age

    </div>

    <div class="editor-field">

        <input data-bind='value: age' />

        <span class="validationWarn">真实的年龄一般在0－100岁之间</span>

        <span class="validationSuccess" data-bind="visible:age.isValid()"></span>

    </div>



    <div class="editor-label">

        地址

    </div>

    <div class="editor-field">

        <input data-bind='value: address' />

        <span class="validationWarn">请输入真实的地址</span>

        <span class="validationSuccess" data-bind="visible:address.isValid()"></span>

    </div>

    <div class="editor-label">

        姓名

    </div>

    <div class="editor-field">

        <input data-bind='value: realName' />

        <span class="validationWarn">姓名由英文字母组成</span>

        <span class="validationSuccess" data-bind="visible:realName.isValid()"></span>

    </div>

    <div class="editor-label">

        身价

    </div>

    <div class="editor-field">

        <input data-bind='value: peoplePrice' /><span class="validationSuccess" data-bind="visible:peoplePrice.isValid()"></span>

    </div>

    <p>

        <input type="button" value="Create" data-bind="click:Register" />

    </p>

</fieldset>

下面是相关截图

 

 返回目录