在前两篇中,体验了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 Model
        var 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,自定义验证信息的位置与内容的更多相关文章

  1. 在ASP.NET MVC中使用Knockout实践01,绑定Json对象

    本篇体验在ASP.NET MVC下使用Knockout,将使用EF Code First创建数据库.最后让Knockout绑定一个Json对象. 创建一个领域模型. namespace MvcAppl ...

  2. 在ASP.NET MVC中使用Knockout实践06,自定义验证、异步验证

    在上一篇中体验了Knockout.Validation的基本验证,本篇体验自定义验证和异步验证. 自定义验证规则 ko.validation有一个rules属性,专门用来存放验证规则,它是一个键值对集 ...

  3. 在ASP.NET MVC中使用Knockout实践05,基本验证

    本篇体验View Model验证.Knockout的subscribe方法能为View Model成员注册验证规则. @{ ViewBag.Title = "Index"; Lay ...

  4. 在ASP.NET MVC中使用Knockout实践09,自定义绑定

    Knockout真正强大之处在于绑定机制,通过data-bind属性值体现绑定,不仅可以绑定值,还可以绑定事件,甚至可以自定义绑定. 从一个例子看Knockou的绑定机制 假设想给一个button元素 ...

  5. 在ASP.NET MVC中使用Knockout实践08,使用foreach绑定集合

    本篇体验使用 foreach 绑定一个Product集合. 首先使用构造创建一个View Model. var Product = function(data) { this.name = ko.ob ...

  6. 在ASP.NET MVC中使用Knockout实践04,控制View Model的json格式内容

    通常,需要把View Model转换成json格式传给服务端.但在很多情况下,View Model既会包含字段,还会包含方法,我们只希望把字段相关的键值对传给服务端. 先把上一篇的Product转换成 ...

  7. 在ASP.NET MVC中使用Knockout实践03,巧用data参数

    使用Knockout,当通过构造函数创建View Model的时候,构造函数的参数个数很可能是不确定的,于是就有了这样的一个解决方案:向构造函数传递一个object类型的参数data. <inp ...

  8. 在ASP.NET MVC中使用Knockout实践02,组合View Model成员、Select绑定、通过构造器创建View Model,扩展View Model方法

    本篇体验使用ko.computed(fn)计算.组合View Model成员.Select元素的绑定.使用构造器创建View Model.通过View Model的原型(Prototype)为View ...

  9. ASP.NET MVC控制器里捕获视图的错误验证信息(ErrorMessage)

    ViewModel类: /// <summary> /// 评论用验证视图 /// </summary> public partial class VCreateShopCom ...

随机推荐

  1. 解决C/C++语言中全局变量重复定义的问题

    前言 今天,在整理自己的代码的时候,考虑到我写的代码从一至终都是在一个cpp文件里面.于是,想把自己的代码中的各个模块分离开来,以便更好地阅读和管理. 遇到的问题 我的做法是: 宏定义.结构体定义.函 ...

  2. python抓取内涵段子文章

    # coding:utf-8 from urllib.request import urlretrieve import threading import requests from bs4 impo ...

  3. final修饰的地址不能被修改

    package final0; /* * 顾客 */public class Customer { // 属性 String name; int age; // 父类object的方法 public ...

  4. IOC创建对象的几种方式

    接上一篇IOC入门 IOC创建对象的几种方式 1)调用无参数构造器 2)带参数构造器 3)工厂创建对象 工厂类:静态方法创建对象 工厂类:非静态方法创建对象 1.对之前的User类进行一些修改,加上一 ...

  5. sed正则表达式匹配,各种括号的转义和不转义

    https://blog.csdn.net/zl87758539/article/details/77481679

  6. WebApi 接口参数详解

    WebApi 接口参数不再困惑:传参详解   阅读目录 一.get请求 1.基础类型参数 2.实体作为参数 3.数组作为参数 4.“怪异”的get请求 二.post请求 1.基础类型参数 2.实体作为 ...

  7. 关于 Google 与 Chrome

    不断更新... 查看chrome版本 chrome浏览器中输入  chrome://version/ Chrome吧 :http://tieba.baidu.com/f?kw=chrome&i ...

  8. 【*】深入理解redis主从复制原理

    1.复制过程 从节点执行 slaveof 命令. 从节点只是保存了 slaveof 命令中主节点的信息,并没有立即发起复制. 从节点内部的定时任务发现有主节点的信息,开始使用 socket 连接主节点 ...

  9. android 调试Installation failed with message INSTALL_FAILED_USER_RESTRICTED: Install canceled by user.

    真机调试 遇到的问题 在使用真机调试的程序的时候出现了这个问题. 解决方法如下

  10. 什么情况下,会用到fiddler或者charles?

    有的页面,比如设限制的html页面,比如原生页面,只能在手机APP里面查看,无法在电脑浏览器中打开查看,这时候,需要用fiddler抓包来查看返回数据,定位问题.