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>

下面是相关截图

 

 返回目录