MVC中使用Validate的验证，要修改错误提示样式一共有3处需要修改，否则就不太完美了；

　　MVC中的Validate的验证机制只用在后台写一次，就可以完成前台和后台的完美验证，前台的验证主要是依靠Validate.js来完成，Validate只是作为一个验证插件，但是错误提示是靠微软的jquery.validate.unobtrusive.js这个js来完成，但是他只负责给错误的边框加上红色，且在后面出现一个span来显示，有时候会撑坏布局；

　　可以使用自定义的验证提示来做到比原始验证漂亮的验证提示；

　　先是找到一款tip提示的插件，有事件和方法进行tip提示的代码控制显示和隐藏及销毁即可；poshytip：http://vadikom.com/demos/poshytip/# 还算不错，基本可以满足要求；

　　MVC的强类型提交表单处理好之后：

public class MemberUser

    {

        [Required(ErrorMessage="用户名不能为空")]

        public string UserName { get; set; }

        [Required(ErrorMessage = "密码不能为空")]

        public string PassWord { get; set; }

    }

　　

页面代码：

@using (Ajax.BeginForm(new AjaxOptions { Url = "/Home/SaveMemberUser/" }))

    {

        @Html.ValidationSummary(true)

        <table>

            <tr>

                <td style="width:80px;text-align:right;">用户</td>

                <td style="width:200px">

                    @Html.TextBoxFor(m => m.UserName)

                    @Html.ValidationMessageFor(m=>m.UserName)

                </td>

            </tr>

            <tr>

                <td style="width: 80px; text-align: right;">密码</td>

                <td style="width:200px">

                    @Html.TextBoxFor(m => m.PassWord)

                    @Html.ValidationMessageFor(m => m.PassWord)

                </td>

            </tr>

            <tr>

                <td colspan="" style="text-align:center">

                    <input type="submit" value="提交" />

                </td>

            </tr>

        </table>

    }

　　注：ValidationMessageFor是必须得，因为错误提示的跟踪点是在ValidationMessageFor生成的span上进行的；jquery、validate、validate. Unobtrusive这几个js是必须得；

　　我们只需要将validate.unobtrusive中进行错误消息提示时进行拦截即可；每次错误提示都会触发validate.unobtrusive中的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;

        //add

        var $customErrorTip = container.attr("data-forerrortip");

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

        error.data("unobtrusiveContainer", container);

        //add

        var elem = $("#" + inputElement[0].name.replace(".", "_"));//添加提示消息

        if (replace) {

            container.empty();

            //add start

            if (error.html() != "") {

                if ($customErrorTip) {

                    $("#" + $customErrorTip).poshytip("destroy");

                } else {

                    elem.poshytip("destroy");

                }

                var direction = "right";

                //左边+元素宽+提示的文字+提示两边的空白

                if ((elem[0].offsetLeft + elem.width() + error.length * 10 + 20) > $(document).width()) {

                    direction = "left";

                }

                var errorConfig = {

                    content: error,

                    alignTo: 'target',

                    alignX: direction,

                    alignY: 'center',

                    showOn: 'none',

                    bgImageFrameSize: 7,

                    offsetX: 5

                };

                if ($customErrorTip) {

                    $("#" + $customErrorTip).poshytip(errorConfig).poshytip('show');

                } else {

                    elem.filter(':not(.valid)').poshytip(errorConfig).poshytip('show');

                }

            } else {

                if ($customErrorTip) {

                    $("#" + $customErrorTip).poshytip("destroy");

                } else {

                    elem.poshytip("destroy");

                }

            }

            //add end

            //update disable

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

        }

        else {

            error.hide();

        }

    }

　　效果图：

　　到此就完了吗？在此错误提示，在鼠标离开或切换的时候，切实可以进行相应的错误提示；

　　现在需求变了，如果是很多单选按钮组，需要至少选中一个怎么办了？如果不作任何修改，默认会在第一个按钮上tip提示为必填项，显然不能100%表达我们的意思；在上面的onError的js中，我判断了data-forerrortip这个属性，用法如下：

<span id="groupRadioError" style="vertical-align:middle;line-height:70px;">&nbsp;</span>

        @Html.ValidationMessageFor(m => m.Option, "", new{data_forErrorTip="groupRadioError" })

　　我定义一个空的span位置定义为自定义的位置，然后在ValidationMessageFor的时候加入一个自定义属性，指向我加入的空span的id，[有点label-for的意思],然后对比我们上面写的onError的js比较，意思就是错误的指向不是错误本身的元素对象而是data-forerrortip属性指向的id的元素进行错误提示

　　到目前为止，你任务提示完了吗？这只是进行了一半了，MVC是前台和后台可以同时验证的，现在说的都只是前台进行的验证，如果后台验证有错误咋办？仔细观察几遍，如果后台有错误，在Response的时候，是直接把错误放在span中给显示出来的；现在可以将validate、validate.unobtrusive注释掉，并且不采用ajax提交，注释掉ajax提交的js[jquery.unobtrusive-ajax],表单改为

@using (Ajax.BeginForm("SaveMemberUser", new { id = "Add" }, new AjaxOptions { Url = "/Home/SaveMemberUser/" }))

{

}

　　如此这般，空表单直接提交，就完全没看到tip的提示效果，因为有tip的提示已经被我们注释掉了；刚说到，span的错误是直接Response出来的

　　这样我们可以在页面刚加载完后就去找class为field-validation-error的样式进行each就可以了:

$(function () {

    $(".field-validation-error").each(function () {

        var $this = $(this);

        var thisid = $this.attr("data-valmsg-for").replace(".", "_");

        var direction = "right";

        // 左边+元素宽+提示的文字+提示两边的空白

        if (($this[0].offsetLeft + $this.width() + $this.text().length * 10 + 20) > $(document).width()) {

            direction = "left";

        }

        $this.hide();

        setTimeout(function () {

            $("#" + thisid).poshytip({

                content: $this.text(),

                alignTo: 'target',

                alignX: direction,

                alignY: 'center',

                showOn: 'none',

                offsetX: 5

            }).poshytip('show');

        }, 100);

    });

});

　　使用setTimeout来控制显示的原因，是因为在使用$();加载的时候，元素已经加载了，但元素的位置信息还未完成初始化，所以tip的位置不正确;还有一点，就是在tip提示的时候进行窗口的大小的拖动会导致tip的提示的延迟位置定位，及时拖动定位可以设置[refreshAniDuration:0]即可

小知识：

　　在进行监听$(window).resize(function(){dowork()}); 这样就会在整个拖动过程中导致dowork函数会被执行N次，显然我们只是想在拖动大小完成的时候执行一次就够了；可以用到事件的延迟执行，setTimeout;

function throttle(method, context) {

                clearTimeout(method.tId);

                method.tId = setTimeout(function () {

                    method.call(context);

                }, 100);

            }
使用的时候
$(window).resize(function(){ throttle(dowork) })
构建一个执行顺序,如果100内,有等待的,则取消,重新加载新的,这样只会在最后一次执行,当然你得控制事件间隔;

最新文章

  1. javascript 原型查找 再次试探~
  2. Bzoj1189 [HNOI2007]紧急疏散evacuate
  3. 创建型模式（前引）简单工厂模式Simple Factory
  4. phpcms 采集教程
  5. cf50A(水题)
  6. IIS URL重写找不到页面 （URLRewriter.dll伪静态）
  7. 红豆带你从零学C#系列之：初识继承与多态
  8. Python 3语法小记（四）字典 dictionary
  9. “NET网络”进行中，多管齐下的人才力挫“”粗俗
  10. LOG4J日志级别详解
  11. CSharpGL(46)用Billboard绘制头顶文字
  12. Shell教程 之数组
  13. 地图调起URI API（通过连接直接调用百度地图）
  14. centos 6.5 搭建开源堡垒机 Teleport 遇到的问题解决
  15. 【BZOJ2067】SZN（二分，动态规划，贪心）
  16. ES 自动恢复分片的时候不恢复了是磁盘超过了85%,然后不恢复了 ES可以配置多个数据目录
  17. element组件知识点总结
  18. Android中Log机制详解
  19. LINQ 学习路程 -- 查询操作 GroupBy ToLookUp
  20. StringUtils工具类说明

热门文章

  1. Java JSON处理库Jackson
  2. 飞天熊猫游戏源代码android文本
  3. Linux访问Windows共享文件夹 (转)
  4. DevExpress XtraReports 入门五 创建交叉表报表
  5. utf8 和 UTF-8 在使用中的差别
  6. Reactive Extensions（Rx）并发浅析
  7. veridata实验举例（2）验证表BONUS与表SALGRADE两节点同步情况
  8. SSAS系列——【06】多维数据（创建Cube）
  9. iOS开发的一些奇巧淫技2
  10. python学习笔记（五岁以下儿童）深深浅浅的副本复印件，文件和文件夹