Asp.net Mvc表单验证气泡提示效果展示

本文实例为大家分享了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 + "'>
    /p>
    ").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行)).

以上就是Asp.net Mvc表单验证气泡提示效果展示的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！