这里有新鲜出炉的精品教程, 程序狗速度看过来!
ASP.NET
ASP.NET 是. NET FrameWork 的一部分, 是一项微软公司的技术, 是一种使嵌入网页中的脚本可由因特网服务器执行的服务器端脚本技术, 它可以在通过 HTTP 请求文档时再在 web 服务器上动态创建它们 指 Active Server Pages(动态服务器页面) , 运行于 IIS(Internet Information Server 服务, 是 Windows 开发的 Web 服务器) 之中的程序
这篇文章主要为大家详细介绍了 Asp.net Mvc 表单验证气泡提示效果的相关资料, 具有一定的参考价值, 感兴趣的小伙伴们可以参考一下
将 ASP.NET MVC 或 ASP.NET Core MVC 的表单验证改成气泡提示:
- // 新建一个 js 文件 (如: jquery.validate.Bubble.js), 在所有要验证的页面引用
- (function ($) {
- $("form .field-validation-valid,form .field-validation-error")
- .each(function () {
- var tip = $(this);
- var fname = tip.attr("data-valmsg-for");
- var input = $("#" + fname);
- var vgName = "vg" + fname;
- $("<span class='vg'id='" + vgName + "'></div>").insertBefore(input);
- input.appendTo("#" + vgName);
- tip.appendTo("#" + vgName);
- });
- })(jQuery);
- .control-label {display: block; text-align:left;}
- @media (min-width: 768px) {
- .control-label {
- display:inline-block;min-width:75px; text-align:right;
- }
- }
- .vg { display: block; position: relative; overflow: visible; }
- .vg .form-control{display:block;max-width:inherit;}
- @media (min-width: 768px) {
- .vg { display: inline-block; }
- }
- .vg .field-validation-error {
- position: absolute; bottom: 101%; min-height: 30px; z-index: 999; right: 0px;
- background: #ff0000; color: #FFFFFF; padding: 0px; border: 7px solid #ff0000;
border-radius: 0.7em; font-size: 9pt; font-family: "Helvetica Neue", Helvetica, 微软雅黑, Arial, sans-serif;
- max-height: 3.7em; overflow: visible; text-overflow: ellipsis; line-height: 1.3em; opacity: 0.7;
- }
- .vg .field-validation-error::after {
- content: " "; position: absolute; width: 1px; height: 1px; border: 14px solid blue; border-color: transparent;
- border-top-color: #ff0000; display: block; overflow: visible; top: 100%; right: 0px;
- }
- // 新建一个 CSS 文件 (如: jquery.validate.Bubble.css), 在所有要验证的页面引用
然后您的表单不用做任何修改就可以正常显示了 (control-label 相关的样式可以不要 (1-6 行)).
来源: http://www.phperz.com/article/18/0315/352314.html