修改.net mvc中前端验证信息的显示方式

最近一直在学习.net core的用法。想法是通过写一个新闻系统来熟悉一下这个最新的技术。其实，我以前一直对.net技术都是浅尝辄止，最主要原因是没有动力。平时写企业站因为时间原因，不是使用php的框架就是用N年以前自己用asp写的系统直接上了。最近一直没什么活，决定试试。但在使用前端验证时有个问题一直很不喜欢。验证信息的显示方式太占用页面的空间。如果显示在输入控件后面，就要为其留出足够的空间，这样看起来很不好看。如果显示在下面，会让界面一会儿高一会儿低的。就想解决一下。至于效果吗，有两种想法，一是泡泡提示效果，另一种是图标提示，两种都可以。于是去网上找各种资料，找到了几篇，大部分都是关于jquery-validation的，而且基本上都是修改原码来实现。这个不是我想要的。因为修改原码会很麻烦，一来，以后原码就无法升级了。二是如果想换一个效果就又要修改原代码。这个不符合切片精神。

于是想如果能象mvc中加过滤器一样，在错误信息显示过程中加入自定义的代码不就可以了吗？但查了很久资料，都没有找到这方面的内容。后来想，能不能来监听css的class的变动来实现呢。这个资料也没能找到中文的，后来在英文网站中找到一篇关于如何监听class改变的。http://forum.jquery.com/topic/firing-an-event-on-addclass，这里面提供了一思路，就是我们可以通过修改jquery的事件处理来实现监听任意事件。

这样，我们就可以不用修改原码而实现我们的想法。

先看一下运行结果：

验证错误信息不出现在页面上，而是当鼠标指上去时才会显示。当然，根据本文的方法，原则上可以实现任何显示效果。比如说气泡提示。

1、网页代码

网页是从mvc渲染后的页面中直接拷贝出来的。因为是实验性质的，所以css文件都没有带。有点难看。其中<img class='validImg' style="display:none;" src="data:images/validatebox_warning.png" title='' >是加在每一个需要前端验证的控件上，用来代替原来的那个<span>的。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>JsDemo</title>

    <script type="text/javascript" src="jquery.js"></script>

    <script src="jquery.validate.js"></script>

    <script src="jquery.validate.unobtrusive.js"></script>

    <script src="my.js"></script>

    <style>

    .control-label{float:left;}

    </style>

</head>

<body>

    <form action="/Admin/Home/Login" onsubmit="return false;" method="post">

        <div class="form-horizontal">

          <div class="text-danger"></div>

          <div class="form-group">

            <label class="col-md-2 control-label" for="LoginName">登录名称</label>

            <div class="col-md-10">

              <input class="form-control" type="text" data-val="true" data-val-required="登录名称必输。" id="LoginName" name="LoginName" value="" />

              <img class='validImg' style="display:none;" src="data:images/validatebox_warning.png" title='' >

              <span id="validSpanForLoginName" class="text-danger field-validation-valid" data-valmsg-for="LoginName" data-valmsg-replace="true"></span>

            </div>

          </div>

          <div class="form-group">

            <label class="col-md-2 control-label" for="LoginPass">登录密码</label>

            <div class="cold-md-10">

              <input class="form-control" type="password" data-val="true" data-val-length="登录密码长度必须小于50个字符。" data-val-length-max="50" data-val-required="登录密码必须输入。" id="LoginPass" name="LoginPass" />

              <img class='validImg' style="display:none;" src="data:images/validatebox_warning.png" title='' >

              <span class="text-danger field-validation-valid" data-valmsg-for="LoginPass" data-valmsg-replace="true"></span>

            </div>

          </div>

          <div class="form-group">

            <label class="col-md-2 control-label" for="CheckCode">验证码</label>

            <input class="form-control" type="text" data-val="true" data-val-required="验证码必须输入。" id="CheckCode" name="CheckCode" value="" />

            <img class='validImg' style="display:none;" src="data:images/validatebox_warning.png" title='' >

            <span class="text-danger field-validation-valid" data-valmsg-for="CheckCode" data-valmsg-replace="true"></span>

          </div>

          <div class="form-group">

            <div class="col-md-offset-2 col-md-10" style="padding-left:65px;">

              <input type="submit" value="登录" class="btn btn-default" />

              <!--<div class="poptip" >

                <span class="poptip-arrow poptip-arrow-bottom">

                    <em>◆</em>

                    <i>◆</i>

                </span>

                这是气泡提示，纯CSS[◆字符]写的哦

              </div>-->

            </div>

          </div>

        </div>

    </form>

</body>

</html>

2、js代码
从上面提到的那篇文章中我们知道，在jquery中可以通过将原方法进行替换的方法对一个方法进行添加功能，这很象mvc中的过滤器。其实真的很简单，就几行代码。

(function($){

$.each(["attr","css"],function(i,methodname){

      var oldmethod = $.fn[methodname];

      $.fn[methodname] = function(){

            oldmethod.apply( this, arguments );

            this.trigger(methodname+"change");

            return this;

      }

});

})(jQuery);

可能你会觉得$.each([], function(){});这个就是一个对数组进行遍历呀。为什么?

再往下看两行就明白了，就是使用$.fn['methodname']来取出要进行过滤的方法，然后对其进行添加代码处理，在这里只是简单地触发一个自定义事件，事件名称就是xxx+change。

这样，在页面中你只要去监听这个自定义事件就可以了。就象下面的代码一样，我只是简单地监听了所有前端验证显示控件对错误信息处理时要用到的两个事件（appendTo和removeData），因为不管如何处理，要想显示信息就要将内容加到页面上的控件中去，一定会使用appendTo或insert或insertBefore等方法来实现。而当验证通过时也应该会使用相对应的方法将添加的信息去掉。当然，到底如何做，这个要看原码才行。

下面是jquery.validate.unobtrusive.js原码中关于如何显示验证错误信息的两部分原码：为什么是jquery.validate.unobtrusive.js？噢，忘了说，这是.net mvc，而不是直接使用jquery.validation.js，不过原理一样，如果你使用的是jquery.validation.js只要找到关键的显示错误信息的方法就行了。

有关错误信息显示的最重要的两个方法：

onError方法用来显示错误信息：

function onError(error, inputElement) {  // 'this' is the form element

        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),

            replaceAttrValue = container.attr("data-valmsg-replace"),

            replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

        container.removeClass("field-validation-valid").addClass("field-validation-error");

        error.data("unobtrusiveContainer", container);

        if (replace) {

            container.empty();

            error.removeClass("input-validation-error").appendTo(container);

        }

        else {

            error.hide();

        }

    }

onSuccess用来去掉错误信息，因为通过验证了。

function onSuccess(error) {  // 'this' is the form element

        var container = error.data("unobtrusiveContainer");

        if (container) {

            var replaceAttrValue = container.attr("data-valmsg-replace"),

                replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null;

            container.addClass("field-validation-valid").removeClass("field-validation-error");

            error.removeData("unobtrusiveContainer");

            if (replace) {

                container.empty();

            }

        }

    }

从上面的两段代码我们可以看出，在显示错误信息时一定会调用appendTo方法，而通过验证时一定会调用removeData方法，所以在下面的代码中监听了这两个方法。

(function($){

        $.each(["appendTo","removeData"],function(i,methodname){

              var oldmethod = $.fn[methodname];

              $.fn[methodname] = function(){

                    oldmethod.apply( this, arguments );

                    this.trigger(methodname+"change");

                    return this;

              }

        });

    })(jQuery);

    $(document).ready(function(e){

        //监听jquery中的appendTo事件而引发的自定义事件

        $(".field-validation-valid").on('appendTochange', function(e){

            var errText = $(this).children().eq(0).text();

            if(errText.length>0)

            {

                $(this).parent().children('.validImg').attr('title', errText).show();

                //将错误提示信息span隐藏起来

                $(this).hide();

            }

            //此时应该添加上去了一个子元素

        });

        //

        $(".field-validation-valid").on('removeDatachange', function(e){

            //此时已经验证通过了

            $(this).parent().children('.validImg').hide();

        });

    });

修改.net mvc中前端验证信息的显示方式的更多相关文章

MVC中数据验证
http://www.studyofnet.com/news/339.html http://www.cnblogs.com/kissdodog/archive/2013/05/04/3060278. ...
爱上MVC系列~前端验证与后端数据有效性验证
回到目录有一句话,在10年前就是真理,到现在也一直都是,“前端验证可以没有,但后端验证必须要有”,这句话相信大家都没有意见吧,前端验证一般指通过JS方式实现的,友好的,个性的验证方式,而后端验证是指 ...
ASP.NET MVC中错误日志信息记录
MVC中有一个处理异常的过滤器 HandleErrorAttribute 1.新建一个类继承自 HandleErrorAttribute,然后重写OnException这个方法 public clas ...
【转】ASP.NET MVC中错误日志信息记录
MVC中有一个处理异常的过滤器 HandleErrorAttribute 1.新建一个类继承自 HandleErrorAttribute,然后重写OnException这个方法 public clas ...
Spring MVC中前端控制器拦截问题
 <servlet> <servlet-name>ssm</servlet-name> <servlet-class& ...
ASP.NET MVC4中的Model验证移除指定验证信息
MVC中通过Model在页面间传值使的程序开发变得更加的快捷,但是很多时候,我们在数据传递的时候为了确保数据的有效性,要对Model的相关属性做基本的数据验证. 不多说直接上个代码,Model的实体类 ...
.NET MVC中的数据验证
一概述关于数据验证和数据注解,是任何软件系统不可小觑的必要模块,主要作用是为了保证数据安全性.防止漏洞注入和网络攻击.从数据验证的验证方式来说,我们一般分为客户端验证和服务端验证(或者两种方式相 ...
asp.net mvc 中的自定义验证(Custom Validation Attribute)
前言
spring.Net之Ioc在MVC中的使用
1.引入dll Common.Logging.dll Spring.Core.dll Spring.Web.dll Spring.Web.Extensions.dll Spring.Web.Mvc4. ...

随机推荐

大量数据快速导出的解决方案-Kettle
1.开发背景在web项目中,经常会需要查询数据导出excel,以前比较常见的就是用poi.使用poi的时候也有两种方式,一种就是直接将集合一次性导出为excel,还有一种是分批次追加的方式适合数据量 ...
面向对象设计模式纵横谈：Singelton单件模式（笔记记录）
李建忠老师讲的<面向对象设计模式纵横谈>,早就看过了,现在有了时间重新整理一下,以前的博客[赛迪网]没有了,现在搬到博客园,重新过一遍,也便于以后浏览. 设计模式从不同的角度分类会得 ...
Dynamics CRM 2015-如何修改Optionset Default Value
在日常工作中,我们时不时会遇到在CRM测试环境上添加Optionset的时候,Default Value是某个值,但换到Production环境或者其他环境,添加的时候,Default Value可能 ...
IOS开发基础知识--碎片50
1:Masonry 2个或2个以上的控件等间隔排序 /** * 多个控件固定间隔的等间隔排列,变化的是控件的长度或者宽度值 * * @param axisType 轴线方向 * @param fi ...
Android开发案例 - 淘宝商品详情
所有电商APP的商品详情页面几乎都是和淘宝的一模一样(见下图): 采用上下分页的模式商品基本参数 & 选购参数在上页展示商品图文详情等其他信息放在下页展示知识要点垂直方向的ViewPa ...
win7 64位下vs不能以管理员身份运行的问题解决
开发机上安装了VS6.0/2008/2010/2013,之前一直是正常的,突然莫名其妙不能以管理员身份运行(除了VS6),报"application cannot start.", ...
SQL优化技术分析-4：其他
ORACLE的提示功能是比较强的功能,也是比较复杂的应用,并且提示只是给ORACLE执行的一个建议,有时如果出于成本方面的考虑ORACLE也可能不会按提示进行.根据实践应用,一般不建议开发人员应用O ...
Oracle读取excel
--解析excel,转换成table,可供查询,支持xls.xlsx --首先修改这个Type,长度改为4000. CREATE OR REPLACE TYPE XYG_PUB_DATA_UPLOAD ...
Oracle forall bulk collect批量数据更新
对于数据量较大的插入操作可采用此种方法操作,注意: limit减少内存占用,如果数据量较大一次性全部加载到内存中,对PGA来说压力太大,可采用limit的方法一次加载一定数量的数据,建议值通常为100 ...
查找素数Eratosthenes筛法的mpi程序
思路: 只保留奇数 (1)由输入的整数n确定存储奇数(不包括1)的数组大小: n=(n%2==0)?(n/2-1):((n-1)/2);//n为存储奇数的数组大小,不包括基数1 (2)由数组大小n.进 ...

修改.net mvc中前端验证信息的显示方式

修改.net mvc中前端验证信息的显示方式的更多相关文章

随机推荐

热门专题