惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

N
Netflix TechBlog - Medium
V
Vulnerabilities – Threatpost
Google Online Security Blog
Google Online Security Blog
Hugging Face - Blog
Hugging Face - Blog
L
LINUX DO - 热门话题
云风的 BLOG
云风的 BLOG
P
Proofpoint News Feed
D
Docker
C
Cyber Attacks, Cyber Crime and Cyber Security
MyScale Blog
MyScale Blog
P
Palo Alto Networks Blog
T
Tenable Blog
P
Privacy International News Feed
Google DeepMind News
Google DeepMind News
小众软件
小众软件
Cisco Talos Blog
Cisco Talos Blog
aimingoo的专栏
aimingoo的专栏
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
A
Arctic Wolf
C
Cybersecurity and Infrastructure Security Agency CISA
C
Cisco Blogs
T
Threat Research - Cisco Blogs
NISL@THU
NISL@THU
The Hacker News
The Hacker News
Project Zero
Project Zero
AWS News Blog
AWS News Blog
Simon Willison's Weblog
Simon Willison's Weblog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
T
Threatpost
V
Visual Studio Blog
The GitHub Blog
The GitHub Blog
The Cloudflare Blog
Last Week in AI
Last Week in AI
Jina AI
Jina AI
Cyberwarzone
Cyberwarzone
The Register - Security
The Register - Security
C
CXSECURITY Database RSS Feed - CXSecurity.com
Vercel News
Vercel News
D
Darknet – Hacking Tools, Hacker News & Cyber Security
MongoDB | Blog
MongoDB | Blog
U
Unit 42
Scott Helme
Scott Helme
A
About on SuperTechFans
WordPress大学
WordPress大学
F
Fortinet All Blogs
大猫的无限游戏
大猫的无限游戏
G
GRAHAM CLULEY
Latest news
Latest news
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
S
Schneier on Security

博客园 - builderman

运行abp install-libs的时候,提示"NPM is not installed"的原因及解决办法 nginx 基本操作 nginx 正向代理与反正代理的区别及简单配置 KeyCloak基础概念 用crontab定时分隔nginx日志文件 修改linux终端中当前用户的显示颜色 minikube使用笔记 ssh端口转发 kubectl proxy 让外部网络访问K8S service的ClusterIP 记录一下我在ubuntu下安装 minikube的过程 ssh ssh-keygen 私钥 docker vscode server docker network docker mysql8 phpmyadmin linux 压缩与解压缩 Ubuntu添加开机自动启动程序的方法 Linux基本命令集合 linux下使用supervisor启动.net core mvc website的配置 小修改,让mvc的验证锦上添点花(1)
小修改,让mvc的验证锦上添点花(2)
builderman · 2013-09-14 · via 博客园 - builderman

上一篇文章我们演示了通过对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>

现在一目了然了吧.