返回目录

对于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系列之验证成功提示显示的更多相关文章

  1. MVVM架构~Knockoutjs系列之验证机制的引入

    返回目录 对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.va ...

  2. MVVM架构~knockoutjs系列之验证信息自定义输出~再续

    返回目录 对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是"整理近可能多的架构方式",这样才可以自由的应变 ...

  3. MVVM架构~knockoutjs系列之验证信息自定义输出~续

    返回目录 上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题 ...

  4. MVVM架构~knockoutjs系列之验证信息自定义输出

    返回目录 这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我 ...

  5. MVVM架构~knockoutjs系列之表单添加(验证)与列表操作源码开放

    返回目录 本文章应该是knockoutjs系列的最后一篇了,前几篇中主要讲一些基础知识,这一讲主要是一个实际的例子,对于一个对象的添加与编辑功能的实现,并将项目源代码公开了,共大家一起学习! knoc ...

  6. MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在

    返回目录 在大部分网站里,用户名都是唯一的,即当用户注册时,如果用户输入的名字不合法,我们需要提示用户,让用户再起个新名字,而这种复杂的验证一般是通过JS来实现的,如果把它集成到ko里,那就完美了.有 ...

  7. MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等

    返回目录 在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章 ...

  8. MVVM架构~knockoutjs系列之正则表达式使规则更灵活

    返回目录 几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验 ...

  9. MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定

    返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...

随机推荐

  1. SharePoint 2013异常信息的查看

    刚刚学习SharePoint开发的时候,经常遇到一些异常,却不能直接看到详细信息,很郁闷.这里做下简单的整理,方便查找: 1.代码未处理异常出现黄页——”‘/’应用程序中的服务器错误.运行时错误“. ...

  2. HTML5所有标签汇总

    来自lampbrother兄弟连HTML5与CSS3教程.<xmp> 结构标签:(块状元素) 有意义的div<article>     标记定义一篇文章<header&g ...

  3. JavaScript-location:封装当前窗口正在打开的url的对象

    location:封装当前窗口正在打开的url的对象 href:完整的url protocol:协议 host:主机名+端口 hostname:主机名 port:端口 pathname:路径 hash ...

  4. mysql无法登录

    很久没用root账户登录mysql发现无法登录 以为root密码被修改 修改root密码后还是无法登录 判断ip没权限 运行 Grant all privileges on *.* to 'root' ...

  5. GitHub开源项目总结

    SwipeRefreshLayout 地址:https://github.com/hanks-zyh/SwipeRefreshLayout 首页轮播的Tab样式,PagerSlidingTab 地址: ...

  6. Ubuntu下设置(增加/删除)开机启动项

    As said above, you have to edit /etc/xdg/autostart/ and either: remove the NoDisplay=true lines; or ...

  7. <Android>文件下载

    使用HTTP协议下载文件 创建一个URL对象 通过URL对象,创建一个HttpURLConnection对象 调用getInputStream()方法得到InputStream对象 从InputStr ...

  8. 使用.net Reflector手动修改单个dll文件

    在项目中修改bug会存才版本混乱的问题,加上dll中的依赖项目比较多,想要修改单个dll文件中的少量代码是很麻烦的. 可以使用Reflector和Reflexil可以手动修改单个dll文件,我使用的是 ...

  9. vim中输入tab符

    今天在写Makefile时各种出错.后来发现是all:的下一行,make前面必须是tab符,不能是空格. 但是vim中只要按tab就会自动转换成4个空格.平时编程需要,也不便把这个设置取消. 查了下, ...

  10. HK一行所见闻

    香港一行 20多年来,未未去过HK,前段时间由于工作关系去了趟HK.感触良多. 一清早,福田过关,做火车,做地铁,一通到了目的地. 总结对那边的印象: 1,所有人都是粤语,包括工作交流.而且他们不怎么 ...