首页 > Web开发 > 详细

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

时间:2018-01-22 13:46:13      阅读:379      评论:0      收藏:0      [点我收藏+]

通过重写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验证信息

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!