MVVM架构~knockoutjs系列之验证信息自定义输出~续
2014-04-14 17:29
357 查看
返回目录
上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题的表单元素,这在有些场合是不适合的,有时,我们希望它在被失去焦点时才将错误消息显示出来,而不去输入信息时,它保持一种原始状态,如下面的图:
![](http://images.cnitblog.com/i/118538/201404/141710166356198.png)
我们可以看到,它在页面被加载后,显示一些友好的提示消息,而当用户没有按着这种规约输入时,它才会提示您错误的消息,如图:
最后输入正确,我们看到的就是:
![](http://images.cnitblog.com/i/118538/201404/150856166191470.png)
当输入合法后,结果如图:
![](http://images.cnitblog.com/i/118538/201404/150856574476696.png)
下面说一下实现代码
其中validationMessage是指定将验证的错误消息进行绑定输出,它比我们上一讲用的error()更好友,它在页面初始化时,不会被执行.isValid()方法是指当前元素是否验证通过,true表示验证通过,反之为出现错误,错误消息会被装载到validationMessage
属性上,initName是我为warn提示建立一个附加对象,是指当页面被初始化时,显示warn信息,而当元素被修改后,显示验证信息或者成功的信息,validationElement表示当前被验证的元素,你在后台为错误消息设置的css类,可以直接反映到时它上面
到目前为止,我们的ko.validation讲的就差不多了,在以后的工作中可能还会遇到新的问题,我同样会把它记下来,写出来的,呵呵.
返回目录
上一讲中,我以一个实际中的例子说明了knockoutjs的自定义验证功能,在使用过程中,出现了一个问题,当然了不是问题,只是一种需求,上一讲中自定义验证的表现是:当页面加载后,自动显示有问题的表单元素,这在有些场合是不适合的,有时,我们希望它在被失去焦点时才将错误消息显示出来,而不去输入信息时,它保持一种原始状态,如下面的图:
![](http://images.cnitblog.com/i/118538/201404/141710166356198.png)
我们可以看到,它在页面被加载后,显示一些友好的提示消息,而当用户没有按着这种规约输入时,它才会提示您错误的消息,如图:
最后输入正确,我们看到的就是:
![](http://images.cnitblog.com/i/118538/201404/150856166191470.png)
当输入合法后,结果如图:
![](http://images.cnitblog.com/i/118538/201404/150856574476696.png)
下面说一下实现代码
HTML核心代码
<div class="editor-label"> 账号: </div> <div class="editor-field"> <input data-bind='value: name,validationElement:name' /> <span class="validationWarn" data-bind="visible:initName">请输入用户名账号,它由字母汉字数字组成</span> <span class="validationError" data-bind="validationMessage:name"></span> <span class="validationSuccess" data-bind="visible:name.isValid()"></span> </div>
其中validationMessage是指定将验证的错误消息进行绑定输出,它比我们上一讲用的error()更好友,它在页面初始化时,不会被执行.isValid()方法是指当前元素是否验证通过,true表示验证通过,反之为出现错误,错误消息会被装载到validationMessage
属性上,initName是我为warn提示建立一个附加对象,是指当页面被初始化时,显示warn信息,而当元素被修改后,显示验证信息或者成功的信息,validationElement表示当前被验证的元素,你在后台为错误消息设置的css类,可以直接反映到时它上面
JS核心代码
ko.validation.configure({//ko.validation相关配置 insertMessages: false,//不自动插入错误消息 errorClass: 'error',//指定反映到validationElement对象上 }); self.name = ko.observable().extend({ minLength: 2, maxLength: { params: 30, message: "名称最大长度为30个字符" }, required: { params: true, message: "请输入名称", }, }); self.initName = ko.observable(!self.name.isValid()); self.name.subscribe(function (newValue) { self.initName(false); });
到目前为止,我们的ko.validation讲的就差不多了,在以后的工作中可能还会遇到新的问题,我同样会把它记下来,写出来的,呵呵.
返回目录
相关文章推荐
- MVVM架构~knockoutjs系列之验证信息自定义输出~再续
- MVVM架构~knockoutjs系列之验证信息自定义输出
- MVVM架构~knockoutjs系列之验证成功提示显示
- MVVM架构~knockoutjs系列之表单添加(验证)与列表操作源码开放
- MVVM架构~Knockoutjs系列之验证机制的引入
- MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
- MVVM架构~Knockoutjs系列之验证机制的引入
- MVVM架构~knockoutjs系列之验证成功提示显示
- MVVM架构~Knockoutjs系列之对象与对象组合
- MVVM架构~Knockoutjs系列之js接收C#数据集合的方式
- MVVM架构~knockoutjs系列之为validation.js扩展minLength和maxLength
- MVVM架构~knockoutjs系列之数组的$index和$data
- 使用HashSet和TreeSet存储多个商品信息,遍历并输出;其中商品属性:编号,名称,单价,出版社;要求向其中添加多个相同的商品,验证集合中元素的唯一性。 提示:向HashSet中添加自定义
- MVVM架构~knockoutjs系列之Mapping插件为对象添加ko属性
- MVVM架构~knockoutjs系列之文本框数符长度动态统计功能
- MVVM架构~knockoutjs系列之为Ajax传递Ko数组对象
- MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定
- MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法