MVVM架构~knockoutjs系列之验证信息自定义输出
这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我们需要将验证的消息输出到指定的元素上!
在写这个文章之前,我一直没有找到好的办法来实现这种功能,但我没有放弃,终于今天找到了比较不错的解决方案,对于一个元素的验证我们可以使用isValid()方法,而对于它的错误消息的显示,我们可以使用error()方法,注意是error()不是errors(),从这一点上我们可以看到,它是针对某点元素来说的,因为它是单数,呵呵.
功能实现
Html代码
- <div class="fcs-item clearfix">
- <p class="thd"><span class="rstar">*</span> 班级圈名称:</p>
- <p class="t-name">
- <input class="cname" style="width: 356px;" type="text" name="Title" data-bind="value:title" />
- </p>
- <p class="item-warn" data-bind="visible:!title.isValid(),text:title.error()"></p>
- <p class="item-warn item-r" data-bind="visible:title.isValid()"> </p>
- </div>
- <div class="fcs-item clearfix">
- <p class="thd"><span class="rstar">*</span> 班级圈价格:</p>
- <p class="t-name">
- <input class="cname" style="width: 356px;" type="text" name="price" data-bind="value:price" />
- </p>
- <p class="item-warn" data-bind="visible:!price.isValid(),text:price.error()"></p>
- <p class="item-warn item-r" data-bind="visible:price.isValid()"> </p>
- </div>
JS代码
- var model = function () {
- $(".validationMessage").hide();//关闭自动输出功能
- var self = this;
- self.id = ko.observable('@Model.TeacherInfoExtID');
- self.title = ko.observable('@Model.Title').extend({
- required: { params: true, message: "请输入班级圈名称" },
- minLength: { params: , message: "班级圈名称最少为1个字" },
- maxLength: { params: , message: "班级圈名称最多为20个字" }
- });
- self.price = ko.observable('@Model.TeacherPrice.Price').extend({
- required: { params: true, message: "请输入班级圈价格" },
- min: { params: , message: "班级圈价格最小为300" },
- max: { params: , message: "班级圈价格最大为500" }
- });
- };
- var M = new model();
- ko.applyBindings(M);
网页载图
MVVM架构~knockoutjs系列之验证信息自定义输出的更多相关文章
- MVVM架构~knockoutjs系列之验证信息自定义输出~续
返回目录 上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题 ...
- MVVM架构~knockoutjs系列之验证信息自定义输出~再续
返回目录 对于一个项目的表单验证,方式有很多,效果也有很多,具体使用哪种完成取决于产品这边,产品让你用什么,你就要用什么,而做为开发人员,我们要做的就是"整理近可能多的架构方式",这样才可以自由的应变 ...
- MVVM架构~Knockoutjs系列之验证机制的引入
返回目录 对于Knockoutjs本身来说,没有提供验证模块,不过,有第三方的扩展,就像你为jquery库作extensions一样,这讲中我将介绍一个Knockout插件扩展,knockout.va ...
- MVVM架构~knockoutjs系列之验证成功提示显示
返回目录 对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.is ...
- MVVM架构~knockoutjs系列之表单添加(验证)与列表操作源码开放
返回目录 本文章应该是knockoutjs系列的最后一篇了,前几篇中主要讲一些基础知识,这一讲主要是一个实际的例子,对于一个对象的添加与编辑功能的实现,并将项目源代码公开了,共大家一起学习! knoc ...
- MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在
返回目录 在大部分网站里,用户名都是唯一的,即当用户注册时,如果用户输入的名字不合法,我们需要提示用户,让用户再起个新名字,而这种复杂的验证一般是通过JS来实现的,如果把它集成到ko里,那就完美了.有 ...
- MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
返回目录 在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章 ...
- MVVM架构~knockoutjs系列之正则表达式使规则更灵活
返回目录 几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验 ...
- MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定
返回目录 Knockoutjs是微软mvc4里一个新东西,用这在MVC环境里实现MVVM,小微这次没有大张旗鼓,而是愉愉的为我们开发者嵌入了一个实现MVVM的插件,这下面的几篇文章中,我和大家将一起去 ...
随机推荐
- python中文编码
前面章节中我们已经学会了如何用 Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会碰到中文编码问题 ...
- Android adb命令 一
adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具.adb的工作方式比 ...
- vs的一些配置
C/C++ -> 常规 -> 附加包含目录 添加头文件位置.例如 $(ProjectDir)..\..\MsUtil\MsTools\include C/C++ -> ...
- lvs DR模式下vip的端口无法telnet
错误介绍: 在lvs配置文件中新添加一个vip ,并添加一个virtual_server,添加两个realserver,配置文件都是复制,结果证明没问题,当时的效果是vip的端口telnet不了 过 ...
- 如何解决WebService参数传递中文乱码问题
1,问题由来 我的主要工作是负责统一适配平台这块,主要任务是提供给客户统一的调用接口,客户使用这个接口可以通过我们再调不同厂家的接口.主要流程如下: 现在客户那边传来的请求报文里面包含中文,使用web ...
- CAP定理
from wikipedia CAP定理 CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致 ...
- PROC SORT
PROC SORT DATA=输入数据集 <OUT=输出数据集><选项>; BY 关键变量; RUN; PROC SORT 语法如上,其中在尖括号中的可以不出现,也不会报错. ...
- JQuery的开发与使用心得
关于jQuery的 入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和编程. 要知道一件重要的事情是,jQuery是只是一个JavaScr ...
- java.lang.OutOfMemoryError: Java heap space解决方法
引起java.lang.OutOfMemoryError: Java heap space异常,可能是由JAVA的堆栈设置太小的原因 根据网上的答案大致有以下两种解决方法: 1.在D:/apache- ...
- HTTP方法:GET对比POST
http://blog.csdn.net/zhenyu5211314/article/details/17067817