zoukankan      html  css  js  c++  java
  • 小修改,让mvc的验证锦上添点花(2)

    上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花

    主要还是修改了onError与onSuccess中的这两个方法

    这两个方法也是用来显示/隐藏验证信息的关键代码

    我根据自己的理解,把这两个方法加上了详细的中文注释

    请大家多多指正:

     //每次执行完验证的时候,都会来这里(不论成功或失败)
        //在这里可以控制验证提示消息的显示或隐藏
        //error:包含验证提示消息的标签,是一个Jquery对象
        //如果验证通过的话是这样子:<span for="UserCode" generated="true"></span>
        //如果验证通过的话是这样子:<span for="UserCode" generated="true">UserCode 字段是必需的。</span>
        //inputElement:当前被验证的input控件
        function onError(error, inputElement) {  // 'this' is the form element
            //首先查到显示验证提示信息的容器,
            //一般是这样子:<span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="true"></span>
            //replace:这个值用来判断容器内的值是否需要被替换
            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-success field-validation-valid").addClass("field-validation-error");
    
            //把容器跟本次的验证提示信息关联起来(success中会用到)
            error.data("unobtrusiveContainer", container);
    
            if (replace) {
                //清空容器内容,
                container.empty();
                //然后把本次的提示信息添加到容器中,并清除提示信息的class
                //注意:如果验证通过的话,还会调用success方法,在success方法中会清空container
                error.removeClass("input-validation-error").appendTo(container);
            }
            else {
                //不清空容器,只是隐藏容器中的验证提示信息
                error.hide();
            }
        }
    //验证通过后,来这里
        //error:验证通过后的提示信息,其实就是<span for="UserCode" generated="true"></span>,跟onError中上的error是同一个东西
        function onSuccess(error) {  // 'this' is the form element
    
            //获取容器(在onError中已经放进error.data中了)
            var container = error.data("unobtrusiveContainer"),
                replaceAttrValue = container.attr("data-valmsg-replace"),
                replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null;
    
            if (container) {
                //隐藏容器
                container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid");
    
                //移除容器跟提示信息的关联
                error.removeData("unobtrusiveContainer");
    
                if (replace) {
                    //清除容器
                    container.empty();
                }
            }
        }

    上面有个变量replace变量我没有解释,现在在这里单独说一下:

    我们在view中用@Html.ValidationMessageFor方法生成显示验证消息的容器时,注意一下第二个参数

    如果不带第二个参数

    @Html.ValidationMessageFor(model => model.UserCode)

    生成的html是这样子的,这是一个空容器

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

    如果传入第二个参数

    @Html.ValidationMessageFor(model => model.UserCode, "请输入用户名")

    生成的htm是这样子的,不再是空容器了,在验证不通过的时候,会直接显示容器里面的信息而忽略Model中定义的验证信息

    <span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="false">请输入用户名</span>

    现在一目了然了吧.

  • 相关阅读:
    c语言中的rewind函数,Win CE 不支持,可用fseek函数替换
    接口隔离原则(转)
    接口设计的 11 种原则 (转)
    设计模式六大原则/接口设计六大原则 之 组合/聚集复用原则(转)
    C++ 求幂的运算符是什么?
    设计模式六大原则/接口设计六大原则 之 迪米特法则(转)
    解决mysql出现“the table is full”的问题
    tomcat远程调试设置
    这些习惯很伤肾 要警觉
    从ie临时文件夹一次复制多个文件
  • 原文地址:https://www.cnblogs.com/builderman/p/3320623.html
Copyright © 2011-2022 走看看