对于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系列之验证成功提示显示，如需转载请自行联系原博主。
