jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示

简介: 类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此。最终效果如下:后端使用Asp.net mvc5,前端框架有:jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap,都是当前最/较新版本。

类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此。最终效果如下:

后端使用Asp.net mvc5,前端框架有:jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap,都是当前最/较新版本。jquery.validate就不用说了,目前比较流行的前端校验组件;jquery.validate.unobtrusive基于jquery.validate,是为了配合Asp.net mvc,微软自己写的,NuGet下可查找Microsoft.jQuery.Unobtrusive.Validation安装,具体怎么用请继续往下看。

首先在后台我们定义实体类:

/// <summary>
/// 厂家信息
/// </summary>
public class Manufacturer : OperatedModel
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int ID { get; set; }
    /// <summary>
    /// 信用代码/注册号
    /// </summary>
    [Required(ErrorMessage = "信用代码/注册号不能为空")]
    [MaxLength(30)]
    public string EnterpriseNo { get; set; }
    /// <summary>
    /// 企业名称
    /// </summary>
    [Required(ErrorMessage = "企业名称不能为空")]
    public string EnterpriseName { get; set; }
    /// <summary>
    /// 注册地址
    /// </summary>
    [Required(ErrorMessage = "注册地址不能为空")]
    public string RegisteredAddress { get; set; }
    /// <summary>
    /// 法人
    /// </summary>
    [Required(ErrorMessage = "法人不能为空")]
    public string ArtificialPerson { get; set; }
    /// <summary>
    /// person in charge 负责人
    /// </summary>
    [Required(ErrorMessage = "负责人不能为空")]
    public string PIC { get; set; }
    [Required(ErrorMessage = "手机号不能为空")]
    [RegularExpression(RegexLib.Mobile, ErrorMessage = "手机号码格式不正确")]
    public string Mobile { get; set; }
        
    [EmailAddress]
    public string Email { get; set; }
    /// <summary>
    /// 商铺号
    /// </summary>
    public string ShopNumber { get; set; }
    /// <summary>
    /// 店铺管理员姓名
    /// </summary>
    public string StoreManagerName { get; set; }
    /// <summary>
    /// 店铺管理员联系方式
    /// </summary>
    [RegularExpression(RegexLib.Mobile, ErrorMessage="手机号码格式不正确")]
    public string StoreManagerNumber { get; set; }
    /// <summary>
    /// 主要执照, 三证合一营业执照
    /// </summary>
    public string MainLicence { get; set; }
    /// <summary>
    /// json, 其他执照,如生产许可证
    /// </summary>
    public string OtherLicence { get; set; }
    /// <summary>
    /// 入驻日期
    /// </summary>
    [Required(ErrorMessage = "入驻日期不能为空")]
    public DateTime EnterDate { get; set; }
    /// <summary>
    /// 离场日期
    /// </summary>
    [Required(ErrorMessage = "截止日期不能为空")]
    public DateTime QuitDate { get; set; }
    /// <summary>
    /// 厂家可提现余额
    /// </summary>
    public decimal Balance { get; set; }
}
实体定义

实体各属性上面有Attribute形式的校验规则,当用户提交一个Model到后端Action时,MVC框架会据此自动帮我们完成校验工作,于是后端开发就很开心。然而在数据提交之前,前端也有必要进行第一轮的校验,如果使用jquery.validate,那么需要在js或标签里再写一遍类似的规则,能不能复用后端已有的代码呢?我们以属性EnterpriseNo为例,在cshtml中写:

@Html.TextBoxFor(m => m.BasicInfo.EnterpriseNo, new { placeholder = "必填项", @class = "form-control" })

最终生成的html如下:

<input class="form-control" data-val="true" data-val-maxlength="字段 EnterpriseNo 必须是最大长度为“30”的字符串或数组类型。" data-val-maxlength-max="30" data-val-required="信用代码/注册号不能为空" id="BasicInfo_EnterpriseNo" name="BasicInfo.EnterpriseNo" placeholder="必填项" value="" data-original-title="" title="" type="text">

标签里面自动加上了很多data-开头的属性,data-val表示该控件需要校验,其它data-开头的就是一系列校验规则和失败时的错误信息,错误信息可以自定义,否则框架会给你生成类如“字段 EnterpriseNo 必须是最大长度为30的字符串或数组类型。”这种机器翻译语言。当然这些属性jquery.validate是不认的,要让jquery.validate认识,就需要jquery.validate.unobtrusive出马了。

现在我们来说这些js如何配合使用。

新版本的jquery.validate已经支持AMD模式,所以可以直接使用requirejs加载,jquery.validate.unobtrusive则不行,需要shim配置,代码:

require.config({
            baseUrl: '/scripts',
            paths: {
                "jquery": 'jquery-2.2.3.min',
                "knockout":'knockout-3.4.0',
                "bootstrap":'../components/bootstrap/3.3.6/js/bootstrap.min','validate':'jquery.validate',
                'validateunobtrusive':'jquery.validate.unobtrusive.min'
            },
            shim : {
                'bootstrap' : {
                    deps : [ 'jquery' ],
                    exports : 'bootstrap'
                },
                'validateunobtrusive':{
                    deps:['validate'],
                    exports: 'validateunobtrusive'
                }
            }
        });

配置好后,在页面中require,此时点击submit按钮提交表单,各js就开始作用了。但是除了焦点会落到第一个校验失败的控件上,似乎并没有其它效果,连jquery.validate默认的在控件后面展示错误信息(errorPlacement函数)都没有了,are you kidding me?其实这是因为jquery.validate.unobtrusive覆盖了errorPlacement配置项(看源码中的attachValidation函数),对我们来说反而省了一道工序。由于tooltip的html标记是由bootstrap动态生成的,所以errorPlacement并不适合我们,参考本文开头的链接,选择覆写showErrors函数,核心代码如下(tooltipvalidator.js):

 1 define(['validateunobtrusive'], function () {
 2 
 3     function TooltipValidator() {}
 4 
 5     TooltipValidator.prototype = {
 6         init: function (validatorOptions, tooltipOptions) {
 7             tooltipOptions = tooltipOptions || {};
 8             validatorOptions = validatorOptions || {};
 9 
10             this._tooltipOptions = $.extend({}, {
11                 placement: 'top'
12             }, tooltipOptions, { animation: false });
13 
14             this._validatorOptions = $.extend({}, {
15 
16                 //errorPlacement: function (error, element) {
17                 //    // do nothing
18                 //},
19 
20                 showErrors: function (errorMap, errorList) {
21                     for (var i = 0; i < this.successList.length; i++) {
22                         var success = this.successList[i];
23                         $(this.successList[i]).tooltip('destroy');
24                         $(this.successList[i]).parents('div.form-group').removeClass('has-error');
25                     }
26                     for (var i = 0; i < errorList.length; i++) {
27                         var errorElement = $(errorList[i].element);
28                         errorElement.parents('div.form-group').addClass('has-error');
29                         errorElement.attr('data-original-title', errorList[i].message).tooltip('show');
30                     }
31                 },
32 
33                 submitHandler: function (form) {
34                     return false;
35                 }
36 
37             }, validatorOptions)
38 
39             this._configTooltip();
40             this._configValidator();
41         },
42 
43         _configTooltip: function () {
44             $('[data-val="true"]').tooltip(this._tooltipOptions);
45         },
46 
47         _configValidator: function () {
48             $.validator.setDefaults(this._validatorOptions);
49             $.validator.unobtrusive.parse(document);
50         }
51     }
52 
53     return new TooltipValidator();
54 });

这样我们就可以在require回调函数中执行tooltipvalidator.init,不需要另外再写逻辑,于是前端同学也开心的笑了。这里还有一处需要注意,大家看到第49行代码,这是初始化jquery.validate.unobtrusive的步骤。原本jquery.validate.unobtrusive在其代码中已经有$(function () { $jQval.unobtrusive.parse(document); });但是由于$.ready会在Dom元素加载完成后(题外话:不是渲染完成)就执行,因此它会在tooltipvalidator有机会_configValidator之前完成,导致咱们的配置项无效(如果是在单页无刷新应用中,会发现之后再次加载局部页时,配置项有效了,因为$.ready只在初次加载的时候执行,而require回调会每次加载都执行)。有两种解决方法:1、让jquery.validate.unobtrusive依赖tooltipvalidator;2、移除jquery.validate.unobtrusive中的$jQval.unobtrusive.parse(document);这里选择第2种。

 

很久没写博文,这次是写的最快的了,20分钟搞定,后续可能会有修改。

转载请注明本文出处:http://www.cnblogs.com/newton/p/6011006.html

目录
相关文章
|
4天前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
17 0
|
6月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
40 0
|
4天前
|
Java 数据库 Maven
基于SSM框架疫情之下社区管理系统(spring+springmvc+mybatis+jsp+jquery+bootstrap)
基于SSM框架疫情之下社区管理系统(spring+springmvc+mybatis+jsp+jquery+bootstrap)
|
6月前
|
前端开发 JavaScript Java
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
26 0
|
JavaScript 前端开发 测试技术
Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页
198 0
|
JavaScript NoSQL 前端开发
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(3)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
139 0
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(3)
|
JavaScript 前端开发 NoSQL
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(2)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
126 0
|
JavaScript 前端开发 NoSQL
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)(1)
常用网络js链接大全(jQuery、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
124 0
|
编解码 移动开发 前端开发
【JQuery】扩展BootStrap入门——知识点讲解(一)
本期主要介绍扩展BootStrap入门——知识点讲解(一)
114 0
【JQuery】扩展BootStrap入门——知识点讲解(一)
|
前端开发 JavaScript iOS开发
【JQuery】扩展BootStrap入门——知识点讲解(二)
本期主要介绍扩展BootStrap入门——知识点讲解(二)
105 0
【JQuery】扩展BootStrap入门——知识点讲解(二)

热门文章

最新文章