對于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系列之驗證成功提示顯示，如需轉載請自行聯系原博主。

總結

以上是生活随笔為你收集整理的MVVM架构~knockoutjs系列之验证成功提示显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。