MVVM架構~knockoutjs系列之驗證成功提示顯示 - lori－IT工程師數位筆記本

文章出處

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