Analyse von Problemen mit tooltip-Fehlertipps durch jquery.validate[.unobtrusive] und 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>
  /// 信用代码/Registriernummer}}
  /// </summary>
  [Required(ErrorMessage = "Kreditcode/Registriernummer darf nicht leer sein")]
  [MaxLength(30)]
  public string EnterpriseNo { get; set; }
  /// summary>
  /// Firmenname
  /// </summary>
  [Required(ErrorMessage = "Firmenname darf nicht leer sein")]
  public string EnterpriseName { get; set; }
  /// summary>
  /// Registrieradresse
  /// </summary>
  [Required(ErrorMessage = "Registrieradresse darf nicht leer sein")]
  public string RegisteredAddress { get; set; }
  /// summary>
  /// Juristische Person
  /// </summary>
  [Required(ErrorMessage = "Juristische Person darf nicht leer sein")]
  public string ArtificialPerson { get; set; }
  /// summary>
  /// person in charge Verantwortliche Person
  /// </summary>
  [Required(ErrorMessage = "Verantwortliche Person darf nicht leer sein")]
  public string PIC { get; set; }
  [Required(ErrorMessage = "Telefonnummer darf nicht leer sein")]
  [RegularExpression(RegexLib.Mobile, ErrorMessage = "Falsches Format der Telefonnummer")]
  public string Mobile { get; set; }
  [EmailAddress]
  public string Email { get; set; }
  /// summary>
  /// Ladennummer
  /// </summary>
  public string ShopNumber { get; set; }
  /// summary>
  /// Name des Ladendirektors
  /// </summary>
  public string StoreManagerName { get; set; }
  /// summary>
  /// Kontaktinformationen des Ladendirektors
  /// </summary>
  [RegularExpression(RegexLib.Mobile, ErrorMessage="Falsches Format der Telefonnummer")]
  public string StoreManagerNumber { get; set; }
  /// summary>
  /// Hauptlizenz, vereinte Lizenz der drei Dokumente
  /// </summary>
  public string MainLicence { get; set; }
  /// summary>
  /// json, andere Lizenzen, wie Produktionslizenzen
  /// </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 als Zeichenfolge oder Array-Typ zu verwenden. Natürlich erkennt jquery.validate diese Eigenschaften nicht, um sie zu erkennen, muss jquery.validate.unobtrusive eingesetzt werden.

Lassen Sie uns nun besprechen, wie diese JavaScript-Dateien miteinander kombiniert werden können.

Die neue Version von jquery.validate unterstützt das AMD-Modell und kann daher direkt mit requirejs geladen werden./jquery.validate.unobtrusive funktioniert jedoch nicht und erfordert eine Shim-Konfiguration, wie folgt:

      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'
        }
      }
    });

Nach der Konfiguration müssen Sie im Dokument require aufrufen. Klicken Sie daraufhin auf die Schaltfläche submit, um das Formular einzureichen, und die verschiedenen JavaScript-Dateien beginnen zu funktionieren. Aber es scheint, dass außer dem Fokus auf dem ersten verletzten Steuerelement keine anderen Effekte vorhanden sind. Und der Fehlermeldungsdarstellung (errorPlacement-Funktion) von jquery.validate ist auch nicht vorhanden, are you kidding me? Tatsächlich wird die errorPlacement-Konfiguration durch jquery.validate.unobtrusive überschrieben (siehe die attachValidation-Funktion im Quellcode), was für uns eine zusätzliche Aufgabe spart. Da das tooltip-html-Tag dynamisch von bootstrap generiert wird, ist errorPlacement nicht geeignet für uns. Nach dem Link am Anfang dieses Artikels wählen wir die Überschreibung der showErrors-Funktion aus. Das Kerncode ist wie folgt (tooltipvalidator.js):

define(['validateunobtrusive'], function () {}}
  function TooltipValidator() {}
  TooltipValidator.prototype = {
    init: function (validatorOptions, tooltipOptions) {
      tooltipOptions = tooltipOptions || {};
      validatorOptions = validatorOptions || {};
      this._tooltipOptions = $.extend({}, {
        placement: 'top'
      }, tooltipOptions, { animation: false });
      this._validatorOptions = $.extend({}, {
        //errorPlacement: function (error, element) {
        //  // nichts tun
        //},
        showErrors: function (errorMap, errorList) {
          for (var i = 0; i < this.successList.length; i++) {
            var success = this.successList[i];
            $(this.successList[i]).tooltip('destroy');
            $(this.successList[i]).parents('div.form-group').removeClass('has-error');
          }
          for (var i = 0; i < errorList.length; i++) {
            var errorElement = $(errorList[i].element);
            errorElement.parents('div.form-group').addClass('has-error');
            errorElement.attr('data-original-title', errorList[i].message).tooltip('show');
          }
        },
        submitHandler: function (form) {
          return false;
        }
      }, validatorOptions)
      this._configTooltip();
      this._configValidator();
    },
    _configTooltip: function () {
      $('[data-val="true"]').tooltip(this._tooltipOptions);
    },
    _configValidator: function () {
      $.validator.setDefaults(this._validatorOptions);
      $.validator.unobtrusive.parse(document);
    }
  }
  return new TooltipValidator();
});

So können wir tooltipvalidator.init im require-Rückruffunktion ausführen, ohne zusätzliche Logik zu schreiben, und die Frontend-Kollegen lachen auch glücklich. Hier gibt es noch ein zu beachtendes Detail, nämlich den Punkt49Zeilen von Code, dies sind die Schritte zur Initialisierung von jquery.validate.unobtrusive. Ursprünglich hat jquery.validate.unobtrusive bereits $(function () { $jQval.unobtrusive.parse(document); }); im eigenen Code. Da jedoch $.ready bereits nach dem Laden der DOM-Elemente (Nebensache: nicht nach dem Rendern) ausgeführt wird, wird es vor dem _configValidator des tooltipvalidator abgeschlossen, was zu einer ungültigen Konfiguration führt (wenn es sich um eine Single-Page-Applikation ohne Page-Refresh handelt, wird festgestellt, dass die Konfiguration nach dem erneuten Laden eines lokalen Teils der Seite gültig ist, da $.ready nur bei der ersten Ladung ausgeführt wird, während die require-Rückrufe bei jeder Ladung ausgeführt werden). Es gibt zwei Lösungen:1Verwenden Sie tooltipvalidator, um von jquery.validate.unobtrusive abhängig zu sein;2Entfernen Sie hier aus jquery.validate.unobtrusive das $jQval.unobtrusive.parse(document); Hier wählen Sie den2Art.

Vielen Dank für das Lesen, hoffentlich kann es Ihnen helfen, danke für die Unterstützung dieser Website!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Urheberrechtsinhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine E-Mail senden. Melden Sie bitte Missbrauch und fügen Sie relevante Beweise bei. Sobald nachgewiesen, wird diese Website den涉嫌侵权的内 容立即删除。)