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>

下面是相关截图

返回目录