在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容
在前两篇中,体验了Knockout的基本验证和自定义验证。本篇自定义验证信息的显示位置与内容。
自定义验证信息的显示位置
通常,Knockout的验证信息紧跟在input后面,通过validationMessage属性可以自定义验证信息的显示位置。
@{ViewBag.Title = "Index";Layout = "~/Views/Shared/_Layout.cshtml";}<style type="text/css">.error {color: red;}</style><div><input type="text" data-bind="value: name"/><p class="error" data-bind="validationMessage: name"></p></div>@section scripts{<script src="~/Scripts/knockout-3.2.0.js"></script><script src="~/Scripts/knockout.validation.js"></script><script src="~/Scripts/zh-CN.js"></script><script type="text/javascript">//使用构造函数创建一个View Modelvar Product = function () {this.name = ko.observable().extend({ minLength: 3 });};//创建实例var product = new Product();//验证设置var knockoutValidationSettings = {insertMessages: false,decorateElement: false,errorMessageClass: 'error',errorElementClass: 'error',errorClass: 'error',errorsAsTitle: true,parseInputAttributes: false,messagesOnModified: true,decorateElementOnModified: true,decorateInputElement: true};ko.validation.init(knockoutValidationSettings, true);//绑定ko.applyBindings(product);$(function () {ko.decorateElement = false;});</script>}
以上,
● 把验证信息显示在了data-bind属性值为validationMessage: name的input上
● 由于重新设置了Knockout-Validation,必须使用ko.validation.init()重新初始化
● insertMessages表示是否把验证信息显示在紧跟input的位置
● decorateElement表示是否要为input加上class="error"
自定义验证信息的内容
如果想重写验证信息的内容,修改如下:
var Product = function () {this.name = ko.observable().extend({ minLength: { params: 3, message: "要我说最小长度是3" } });};
在ASP.NET MVC中使用Knockout实践07,自定义验证信息的位置与内容的更多相关文章
- 在ASP.NET MVC中使用Knockout实践01,绑定Json对象
本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...
- 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证
在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...
- 在ASP.NET MVC中使用Knockout实践05,基本验证
本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...
- 在ASP.NET MVC中使用Knockout实践09,自定义绑定
Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...
- 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合
本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...
- 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容
通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...
- 在ASP.NET MVC中使用Knockout实践03,巧用data参数
使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...
- 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法
本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...
- ASP.NET MVC控制器里捕获视图的错误验证信息(ErrorMessage)
ViewModel类: /// <summary> /// 评论用验证视图 /// </summary> public partial class VCreateShopCom ...
随机推荐
- 解决C/C++语言中全局变量重复定义的问题
前言 今天,在整理自己的代码的时候,考虑到我写的代码从一至终都是在一个cpp文件里面.于是,想把自己的代码中的各个模块分离开来,以便更好地阅读和管理. 遇到的问题 我的做法是: 宏定义.结构体定义.函 ...
- python抓取内涵段子文章
# coding:utf-8 from urllib.request import urlretrieve import threading import requests from bs4 impo ...
- final修饰的地址不能被修改
package final0; /* * 顾客 */public class Customer { // 属性 String name; int age; // 父类object的方法 public ...
- IOC创建对象的几种方式
接上一篇IOC入门 IOC创建对象的几种方式 1)调用无参数构造器 2)带参数构造器 3)工厂创建对象 工厂类:静态方法创建对象 工厂类:非静态方法创建对象 1.对之前的User类进行一些修改,加上一 ...
- sed正则表达式匹配,各种括号的转义和不转义
https://blog.csdn.net/zl87758539/article/details/77481679
- WebApi 接口参数详解
WebApi 接口参数不再困惑:传参详解 阅读目录 一.get请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4.“怪异”的get请求 二.post请求 1.基础类型参数 2.实体作为 ...
- 关于 Google 与 Chrome
不断更新... 查看chrome版本 chrome浏览器中输入 chrome://version/ Chrome吧 :http://tieba.baidu.com/f?kw=chrome&i ...
- 【*】深入理解redis主从复制原理
1.复制过程 从节点执行 slaveof 命令. 从节点只是保存了 slaveof 命令中主节点的信息,并没有立即发起复制. 从节点内部的定时任务发现有主节点的信息,开始使用 socket 连接主节点 ...
- android 调试Installation failed with message INSTALL_FAILED_USER_RESTRICTED: Install canceled by user.
真机调试 遇到的问题 在使用真机调试的程序的时候出现了这个问题. 解决方法如下
- 什么情况下,会用到fiddler或者charles?
有的页面,比如设限制的html页面,比如原生页面,只能在手机APP里面查看,无法在电脑浏览器中打开查看,这时候,需要用fiddler抓包来查看返回数据,定位问题.