返回目录

这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我们需要将验证的消息输出到指定的元素上!

在写这个文章之前,我一直没有找到好的办法来实现这种功能,但我没有放弃,终于今天找到了比较不错的解决方案,对于一个元素的验证我们可以使用isValid()方法,而对于它的错误消息的显示,我们可以使用error()方法,注意是error()不是errors(),从这一点上我们可以看到,它是针对某点元素来说的,因为它是单数,呵呵.

功能实现

Html代码

<div class="fcs-item clearfix">
<p class="thd"><span class="rstar">*</span>&nbsp;班级圈名称:</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()">&nbsp;</p>
</div> <div class="fcs-item clearfix">
<p class="thd"><span class="rstar">*</span>&nbsp;班级圈价格:</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()">&nbsp;</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系列之验证信息自定义输出的更多相关文章

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

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

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

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

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

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

  4. MVVM架构~knockoutjs系列之验证成功提示显示

    返回目录 对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.is ...

  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. Tomcat的优化

    Tomcat的优化配置 修改tomcat的config目录下server.xml文件 <Connector port="9021"  protocol="HTTP/ ...

  2. html 页面内锚点定位及跳转方法总结

    第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...

  3. javaWeb实现文件上传与下载 (转)

    文件上传概述 实现web开发中的文件上传功能,需完成如下二步操作: 在web页面中添加上传输入项 在servlet中读取上传文件的数据,并保存到本地硬盘中. 如何在web页面中添加上传输入项? < ...

  4. java TreeMap用法

    转自:http://huchenqiang90.blog.163.com/blog/static/11250080020101025956498/ 最近工作遇到需要按一个model中不同的列进行排序的 ...

  5. 编译gtk+程序报错gcc: pkg-config --cflags --libs gtk+-2.0: 没有那个文件或目录

    第一次接触gtk+.在网上搜罗良一番,装好相应的库后,编写了第一hello程序.在编译时输入以下命令:gcc -o hello hello.c 'pkg-config --cflags --libs ...

  6. Partial backup 备份指定表/库

    Partial Backups XtraBackup支持partial backups,这意味着你可以只备份部分表或库.要备份的表必须是独立表空间,即innodb_file_per_table=1 有 ...

  7. Windows下Spark单机环境配置

    1. 环境配置 a)  java环境配置: JDK版本为1.7,64位: 环境变量配置如下: JAVA_HOME为JDK安装路径,例如D:\software\workSoftware\JAVA 在pa ...

  8. Log4j的ConversionPattern无缝适配到Logback

    为了能将log4j的ConversionPattern无缝应用到logback上来,需要对两个Conversion做适配,具体可以参考:Log4j 与 Logback的ConversionPatter ...

  9. Bootstrap 导航栏和登陆框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. PHP自带Session隐患(session文件独占锁引起阻塞)

    PHP自带Session隐患(session文件独占锁引起阻塞) PHP默认的会话处理器是session.save_handler = files(即文件).如果同一个客户端同时并发发送多个请求(如a ...