码迷,mamicode.com
首页 > Web开发 > 详细

使用tooltip显示jquery.validate.unobtrusive验证信息

时间:2018-01-22 14:11:37      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:label   查看   css   添加   sha   message   form   str   strong   

通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图:

技术分享图片

1. 在ViewModel中定义验证规则

[Display(Name = "纬度")]
[Required(ErrorMessage = "{0}不能为空")]
[RegularExpression(@"^\-?\d+(\.\d+)?$", ErrorMessage = "{0}格式不正确,请输入数值")]
[Range(-90, 90, ErrorMessage = "{0}应在{1}到{2}之间")]
public decimal Latitude { get; set; }

2. 在页面中添加ValidationMessage

<div class="form-group">
    @Html.LabelFor(x => x.Latitude, new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.TextBoxFor(x => x.Latitude, new { @class = "form-control" })
        @Html.ValidationMessageFor(x => x.Latitude)
    </div>
</div>

3. 预览页面,查看生成的HTML

技术分享图片

有错误信息时,html为

技术分享图片

4. 重写CSS

.field-validation-valid > span,
.field-validation-error > span {
    position: absolute;
    bottom: -25px;
    padding: 3px 12px;
    background: #f03040;
    color: white;
    font-size: 12px;
    box-shadow: #ccc 3px 3px 3px;
    z-index: 1;
}

.field-validation-valid > span:before,
.field-validation-error > span:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 12px;
    border-top: 0;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #f03040;
    border-left: 5px solid transparent;
}

  

 

使用tooltip显示jquery.validate.unobtrusive验证信息

标签:label   查看   css   添加   sha   message   form   str   strong   

原文地址:https://www.cnblogs.com/zoex/p/jquery-validate-unobtrusive-tooltip.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!