jquery.validate[.unobtrusive]和Bootstrap實(shí)現(xiàn)tooltip錯(cuò)誤提示

類似的文章園子里已有，請(qǐng)看這里，個(gè)人感覺稍顯復(fù)雜，日前也打算寫一個(gè)簡(jiǎn)單的給項(xiàng)目用，一些關(guān)鍵點(diǎn)記錄于此。最終效果如下：

后端使用Asp.net mvc5，前端框架有：jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap，都是當(dāng)前最/較新版本。jquery.validate就不用說了，目前比較流行的前端校驗(yàn)組件；jquery.validate.unobtrusive基于jquery.validate，是為了配合Asp.net mvc，微軟自己寫的，NuGet下可查找Microsoft.jQuery.Unobtrusive.Validation安裝，具體怎么用請(qǐng)繼續(xù)往下看。

首先在后臺(tái)我們定義實(shí)體類：

/// <summary>
/// 廠家信息
/// </summary>
public class Manufacturer : OperatedModel
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int ID { get; set; }
    /// <summary>
    /// 信用代碼/注冊(cè)號(hào)
    /// </summary>
    [Required(ErrorMessage = "信用代碼/注冊(cè)號(hào)不能為空")]
    [MaxLength(30)]
    public string EnterpriseNo { get; set; }
    /// <summary>
    /// 企業(yè)名稱
    /// </summary>
    [Required(ErrorMessage = "企業(yè)名稱不能為空")]
    public string EnterpriseName { get; set; }
    /// <summary>
    /// 注冊(cè)地址
    /// </summary>
    [Required(ErrorMessage = "注冊(cè)地址不能為空")]
    public string RegisteredAddress { get; set; }
    /// <summary>
    /// 法人
    /// </summary>
    [Required(ErrorMessage = "法人不能為空")]
    public string ArtificialPerson { get; set; }
    /// <summary>
    /// person in charge 負(fù)責(zé)人
    /// </summary>
    [Required(ErrorMessage = "負(fù)責(zé)人不能為空")]
    public string PIC { get; set; }
    [Required(ErrorMessage = "手機(jī)號(hào)不能為空")]
    [RegularExpression(RegexLib.Mobile, ErrorMessage = "手機(jī)號(hào)碼格式不正確")]
    public string Mobile { get; set; }
        
    [EmailAddress]
    public string Email { get; set; }
    /// <summary>
    /// 商鋪號(hào)
    /// </summary>
    public string ShopNumber { get; set; }
    /// <summary>
    /// 店鋪管理員姓名
    /// </summary>
    public string StoreManagerName { get; set; }
    /// <summary>
    /// 店鋪管理員聯(lián)系方式
    /// </summary>
    [RegularExpression(RegexLib.Mobile, ErrorMessage="手機(jī)號(hào)碼格式不正確")]
    public string StoreManagerNumber { get; set; }
    /// <summary>
    /// 主要執(zhí)照, 三證合一營業(yè)執(zhí)照
    /// </summary>
    public string MainLicence { get; set; }
    /// <summary>
    /// json, 其他執(zhí)照，如生產(chǎn)許可證
    /// </summary>
    public string OtherLicence { get; set; }
    /// <summary>
    /// 入駐日期
    /// </summary>
    [Required(ErrorMessage = "入駐日期不能為空")]
    public DateTime EnterDate { get; set; }
    /// <summary>
    /// 離場(chǎng)日期
    /// </summary>
    [Required(ErrorMessage = "截止日期不能為空")]
    public DateTime QuitDate { get; set; }
    /// <summary>
    /// 廠家可提現(xiàn)余額
    /// </summary>
    public decimal Balance { get; set; }
}

實(shí)體定義

實(shí)體各屬性上面有Attribute形式的校驗(yàn)規(guī)則，當(dāng)用戶提交一個(gè)Model到后端Action時(shí)，MVC框架會(huì)據(jù)此自動(dòng)幫我們完成校驗(yàn)工作，于是后端開發(fā)就很開心。然而在數(shù)據(jù)提交之前，前端也有必要進(jìn)行第一輪的校驗(yàn)，如果使用jquery.validate，那么需要在js或標(biāo)簽里再寫一遍類似的規(guī)則，能不能復(fù)用后端已有的代碼呢？我們以屬性EnterpriseNo為例，在cshtml中寫：

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

最終生成的html如下：

標(biāo)簽里面自動(dòng)加上了很多data-開頭的屬性，data-val表示該控件需要校驗(yàn)，其它data-開頭的就是一系列校驗(yàn)規(guī)則和失敗時(shí)的錯(cuò)誤信息，錯(cuò)誤信息可以自定義，否則框架會(huì)給你生成類如“字段 EnterpriseNo 必須是最大長度為30的字符串或數(shù)組類型。”這種機(jī)器翻譯語言。當(dāng)然這些屬性jquery.validate是不認(rèn)的，要讓jquery.validate認(rèn)識(shí)，就需要jquery.validate.unobtrusive出馬了。

現(xiàn)在我們來說這些js如何配合使用。

新版本的jquery.validate已經(jīng)支持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，此時(shí)點(diǎn)擊submit按鈕提交表單，各js就開始作用了。但是除了焦點(diǎn)會(huì)落到第一個(gè)校驗(yàn)失敗的控件上，似乎并沒有其它效果，連jquery.validate默認(rèn)的在控件后面展示錯(cuò)誤信息（errorPlacement函數(shù)）都沒有了，are you kidding me？其實(shí)這是因?yàn)閖query.validate.unobtrusive覆蓋了errorPlacement配置項(xiàng)（看源碼中的attachValidation函數(shù)），對(duì)我們來說反而省了一道工序。由于tooltip的html標(biāo)記是由bootstrap動(dòng)態(tài)生成的，所以errorPlacement并不適合我們，參考本文開頭的鏈接，選擇覆寫showErrors函數(shù)，核心代碼如下（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回調(diào)函數(shù)中執(zhí)行tooltipvalidator.init，不需要另外再寫邏輯，于是前端同學(xué)也開心的笑了。這里還有一處需要注意，大家看到第49行代碼，這是初始化jquery.validate.unobtrusive的步驟。原本jquery.validate.unobtrusive在其代碼中已經(jīng)有$(function () { $jQval.unobtrusive.parse(document); });但是由于$.ready會(huì)在Dom元素加載完成后（題外話：不是渲染完成）就執(zhí)行，因此它會(huì)在tooltipvalidator有機(jī)會(huì)_configValidator之前完成，導(dǎo)致咱們的配置項(xiàng)無效（如果是在單頁無刷新應(yīng)用中，會(huì)發(fā)現(xiàn)之后再次加載局部頁時(shí)，配置項(xiàng)有效了，因?yàn)?.ready只在初次加載的時(shí)候執(zhí)行，而require回調(diào)會(huì)每次加載都執(zhí)行）。有兩種解決方法：1、讓jquery.validate.unobtrusive依賴tooltipvalidator；2、移除jquery.validate.unobtrusive中的$jQval.unobtrusive.parse(document);這里選擇第2種。

很久沒寫博文，這次是寫的最快的了，20分鐘搞定，后續(xù)可能會(huì)有修改。

轉(zhuǎn)載請(qǐng)注明本文出處：http://www.rzrgm.cn/newton/p/6011006.html

posted @ 2016-10-29 17:45 萊布尼茨閱讀(2201) 評(píng)論(1) 收藏舉報(bào)

刷新頁面返回頂部

萊布尼茨

此處不歸牛頓管

jquery.validate[.unobtrusive]和Bootstrap實(shí)現(xiàn)tooltip錯(cuò)誤提示

公告