Анализ проблемы с реализацией tooltip ошибок с использованием jquery.validate[.unobtrusive] и Bootstrap

Похожие статьи уже есть, пожалуйста, смотрите здесь, на мой взгляд, они несколько сложны, в последнее время я также собирался написать одну простую для использования в проекте, ключевые моменты я записал здесь. Финальный результат такой:

Backend использует Asp.net mvc5, frontend фреймворки: jquery.validate, jquery.validate.unobtrusive, requirejs, Bootstrap, все в текущих самых/новейших версиях. jquery.validate не нужно объяснять, это目前在 frontend проверка компонентов, которые очень популярны; jquery.validate.unobtrusive основан на jquery.validate и предназначен для использования с Asp.net mvc, написан Microsoft, его можно найти в NuGet под названием Microsoft.jQuery.Unobtrusive.Validation. Как использовать, можно продолжить читать.

Сначала в后台 мы определяем класс сущности:

/// <summary>
/// Информация о производителе
/// </summary>
public class Manufacturer : OperatedModel
{
  [Key]
  [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
  public int ID { get; set; }
  /// <summary>
  /// Код кредитоспособности/регистрационный номер
  /// </summary>
  [Требуется(ErrorMessage = "Код кредитоспособности/регистрационный номер не может быть пустым")]
  [МаксимальнаяДлина(30)]
  public string EnterpriseNo { get; set; }
  /// <summary>
  /// Название компании
  /// </summary>
  [Требуется(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, когда пользователь подает модель на задний конец Action, MVC-фреймворк автоматически выполняет проверку. Поэтому разработка на заднем конце очень довольна. Однако перед отправкой данных на передний конец также необходимо провести первое_round проверки. Если использовать 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.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). Вы серьезно? На самом деле, это потому, что jquery.validate.unobtrusive перекрывает настройку errorPlacement (смотрите исходный код функции attachValidation). Для нас это даже упрощает процесс. Поскольку html-тег tooltip генерируется динамически bootstrap, errorPlacement не подходит нам. С参照ением к ссылке в начале статьи, выберите перезапись функции showErrors, ключевой код следующий (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) {
        //  // do nothing
        //},
        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();
});

Таким образом, мы можем выполнить tooltipvalidator.init в функции callback require, не needing to write additional logic, and the front-end colleagues also happily smiled. There is also something to note here. As you can see in line 49 of the code, this is the step to initialize jquery.validate.unobtrusive. Originally, jquery.validate.unobtrusive already has $(function () { $jQval.unobtrusive.parse(document); }); However, due to $.ready being executed after the Dom elements are loaded (by the way: not rendered), it will be completed before tooltipvalidator has a chance to _configValidator, resulting in our configuration options being invalid (if it is in a single-page refresh application, you will find that the configuration options are valid when loading a partial page again, because $.ready is only executed during the initial load, while the require callback will be executed every time it is loaded). There are two solutions: 1. Make jquery.validate.unobtrusive dependent on tooltipvalidator; 2. Remove $jQval.unobtrusive.parse(document); from jquery.validate.unobtrusive. We choose the second option.

Спасибо за чтение, надеюсь, это поможет вам, спасибо всем за поддержку этого сайта!

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему владельцу, контент предоставлен пользователями Интернета, сайт не обладает правами собственности, не undergone редактирование人工, также не нести ответственность за соответствующие правовые вопросы. Если вы обнаружите спорное содержание авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма, пожалуйста, замените # на @) для сообщения и предоставьте соответствующие доказательства. При подтверждении, сайт немедленно удалил спорное содержание, нарушающее авторские права.