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>
下面是相关截图
本文转自博客园张占岭（仓储大叔）的博客，原文链接：MVVM架构~knockoutjs系列之验证成功提示显示，如需转载请自行联系原博主。
