Что такое ненавязчивая проверка jQuery?

148

Я знаю, что такое плагин проверки jQuery. Я знаю, что библиотека JQuery Unobtrusive Validation была создана Microsoft и включена в платформу ASP.NET MVC. Но я не могу найти ни одного онлайн-источника, который бы объяснил, что это такое. В чем разница между стандартной библиотекой jQuery Validation и «ненавязчивой» версией?

— user1438940
источник

2

ненавязчивая проверка добавит атрибуты data-val -... в HTML, так что вы сможете прочитать проверку даже в источнике HTML.

— Пребен Хайбрехтс

3

Я полагаю, что ответ на ваш вопрос объясняется здесь: bradwilson.typepad.com/blog/2010/10/… Он объясняет разницу между тем, что происходит, когда незаметно включено или выключено.

— Томми

123

У Брэда Уилсона есть пара замечательных статей о ненавязчивой валидации и ненавязчивом Ajax .
Это также очень хорошо показано в этом видео Pluralsight в разделе «AJAX и JavaScript».

По сути, это просто проверка Javascript, которая не загрязняет ваш исходный код собственным кодом проверки . Это делается путем использования data-атрибутов в HTML.

— BERTL
источник

Не могли бы вы рассказать нам об улучшениях, сделанных в mvc3 для ненавязчивой проверки?

— wwcdwdcw

Ссылка на видео битая.

— Миша Морошко

Спасибо @MishaMoroshko за указание на это. Пока я не нашел альтернативы Pluralsight, поэтому удалил ссылку. Я буду редактировать пост снова, как только у меня будет замена.

— Бертл

Некоторые примеры кода были бы хорошими. Поскольку ваш ответ не очень полезен, большинство людей, приходящих сюда в поисках быстрых решений и примеров кода, а не ссылок на статьи, со временем могут сломаться, они, как правило, хороши в качестве ссылки после того, как вы увидите Пример кода. Я предпочитаю следующие 2 ответа.

— Оуэн

107

С ненавязчивым способом:

Вам не нужно вызывать метод validate ().
Вы задаете требования, используя атрибуты данных (data-val, data-val-required и т. Д.)

Пример проверки Jquery :

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

Jquery Validate Ненавязчивый пример :

<input type="text" name="email" data-val="true" 
data-val-required="This field is required.">  

<div class="validation-summary-valid" data-valmsg-summary="true">
    <ul><li style="display:none"></li></ul>
</div>

— Джеймс Лаврук
источник

4

Спасибо, я пытался с помощью Ctrl-F найти вызов valdiate () в некотором коде, с которым мне пришлось работать.

— Интересно,

2

Да, «ненавязчивый», по-видимому, является эвфемизмом для «неоткрываемого» здесь.

— ReactingToAngularVues

18

Для пояснения, вот более подробный пример, демонстрирующий проверку формы с использованием jQuery Validation Unobtrusive.

Оба используют следующий JavaScript с jQuery:

  $("#commentForm").validate({
    submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // then:
      alert("This is a valid form!");
//      form.submit();
    }
  });

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

Проверка jQuery

Просто используйте следующие атрибуты:

Установить требуется при необходимости
Установите тип для правильного форматирования (электронная почта и т. Д.)
Установите другие атрибуты, такие как размер (минимальная длина и т. Д.)

Вот форма ...

<form id="commentForm">
  <label for="form-name">Name (required, at least 2 characters)</label>
  <input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
  <input type="submit" value="Submit">
</form>

Проверка JQuery Ненавязчива

Необходимы следующие атрибуты данных:

data-msg-required = "Это необходимо."
данных правил требуется = «истина / ложь»

Вот форма ...

<form id="commentForm">
  <label for="form-x-name">Name (required, at least 2 characters)</label>
  <input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
  <input type="submit" value="Submit">
</form>

На основании любого из этих примеров, если требуемые поля формы заполнены и соответствуют критериям дополнительных атрибутов, появится всплывающее сообщение с уведомлением о том, что все поля формы проверены. В противном случае рядом с полями неправильной формы будет текст, указывающий на ошибку.

Ссылки: - Проверка jQuery: https://jqueryvalidation.org/documentation/

— Ричард Налезински
источник

7

jQuery Validation Ненавязчивый Native - это коллекция вспомогательных расширений HTML.COM ASP.Net MVC. Они используют встроенную поддержку jQuery Validation для проверки, основанной на атрибутах данных HTML 5. Microsoft отправила jquery.validate.unobtrusive.js обратно в MVC 3. Он предоставил способ применить проверки модели данных на стороне клиента, используя комбинацию атрибутов данных jQuery Validation и HTML 5 (это «ненавязчивая» часть).

— Bimal
источник