Лучшее решение для JavaScript для проверки и взаимодействия с клиентской стороной?

Ответ 1

Это бесстыдный плагин, но могу ли я предложить framework, который я разработал? Я построил его на основе аннотаций (a la Hibernate Validator). Он поддерживает пользовательские ограничения, и я чувствую, что он довольно мощный. Здесь также является вопросом Stackoverflow, где я попросил обзор структуры.

• Презентация. С помощью специальных ограничений проверки можно привязать проверку к элементу onChange. Кроме того, поскольку Regula поддерживает настраиваемые валидаторы, вы можете настроить свой собственный валидатор на значение поля (поэтому измените 5 на 5.00).
• Побочные эффекты: Regula поддерживает побочные эффекты с помощью пользовательских ограничителей-ограничителей.
• Группы: Regula поддерживает группы проверки. Вы можете настроить целевые группы для проверки. Объединив пользовательский валидатор и группу, вы можете контролировать поведение валидатора, чтобы он проверял только тогда, когда все элементы этой группы заполнены (вам придется выполнить эту проверку через обычный Javascript).
• Проверка на стороне сервера. С пользовательскими ограничениями вы можете сделать вызов AJAX для проверки на стороне сервера. Поскольку структура в настоящее время структурирована, это обязательно должно быть блокирующим ajax-вызовом. Я планирую добавить асинхронную функцию в будущем.
• Несколько форм на странице: Regula не ограничивается проверкой одной формы на странице. Он может обрабатывать несколько форм (не уверен, правильно ли я понял ваше требование - так что я, возможно, не ответил бы на эту часть правильно).
• Настраиваемое отображение ошибок: Regula ничего не делает с пользовательским интерфейсом страницы в отношении проверки. Когда вы проверяете, вы получаете набор нарушений ограничений, содержащих сообщения об ошибках и т.д. Это зависит от вас, как отображать их.
• Snappiness: Я не выполнял никаких тестов, поэтому я не могу комментировать производительность своей инфраструктуры в этом отношении.
• Отправить кнопки: Это то, что мне еще предстоит решить (асинхронный или синхронный).

Вот несколько примеров:

Ниже приведена стандартная проверка со встроенными ограничениями:

<input id = "myInput"
       name = "myInput"
       type = "text"
       class = "regula-validation"
       data-constraints = '@NotEmpty @IsNumeric @Between(min=1, max=5)' />

jQuery(document).ready(function() {
    // must call regula.binnd() first. The best place would be in an
    // onload handler. This function looks for elements with
    // a class name of "regula-validation" and binds the
    // appropriate constraints to the elements

    regula.bind(); 

    jQuery("#myForm").submit(function() {
        // this function performs the actual validation
        var validationResults = regula.validate();

        for(var index in validationResults) {
             var validationResult = validationResults[index];
             alert(validationResult.message);
        }
    });
});

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

Здесь пример пользовательского ограничения:

regula.custom({
   name: "MustBe42",
   defaultMessage: "The answer must be equal to 42",
   validator: function() {
      return this.value == 42;
   }
});

И его использование:

<input id = "theAnswerToLifeTheUniverseAndEverything" 
       name = "theAnswerToLifeTheUniverseAndEverything" 
       value = ""
       class = "regula-validation"
       data-constraints = "@MustBe42" />

Поскольку валидатор является функцией Javascript, вы можете заставить его что-либо сделать (так что это касается вашего вопроса о побочных эффектах).

Вот пример другого ограничения, которое принимает параметры:

regula.custom({
   name: "DivisibleBy",
   defaultMessage: "{label} must be divisible by {divisor}",
   params: ["divisor"],
   validator: function(params) {
      var divisor = params["divisor"];
      return (this.value % divisor) == 0;
   }
});

И использование:

<input id = "number" 
       name = "number" 
       value = ""
       class = "regula-validation"
       data-constraints = "@DivisibleBy(divisor=3, label='The Number')" />

Вот пример использования групп проверки:

<input id = "score"
       name = "score"
       type = "text"
       class = "regula-validation"
       data-constraints = '@IsNumeric(label="Score", 
                                      message="{label} needs to be a number!"
                                      groups=[FirstGroup, SecondGroup, ThirdGroup]' />

<input id = "age"
       name = "age"
       type = "text"
       class = "regula-validation"
       data-constraints = '@IsNumeric(label="Age", 
                                      message="{label} needs to be a number!"
                                      groups=[SecondGroup]' />

<input id = "name"
       name = "name"
       type = "text"
       class = "regula-validation"
       data-constraints = '@NotEmpty(label="Name", 
                                     message="{label} cannot be empty!"
                                     groups=[FirstGroup]' />

И фрагмент, который проверяет только FirstGroup (поэтому проверяются только score и name):

var constraintViolations = regula.validate({groups: [regula.Group.FirstGroup]});
var messages = "";

for(var index in constraintViolations) {
      var constraintViolation = constraintViolations[index];
      messages += constraintViolation.message + "\n";
}

if(messages != "") {
   alert(messages);
}

Если вы планируете попробовать это, я рекомендую загрузить версию 1.1.1. Текущая документация соответствует этой версии. В 1.2.1 я добавил поддержку сложных ограничений, но я не обновил свою документацию, чтобы это отразить.

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

ОБНОВЛЕНИЕ # 1

Sohnee упомянутая проверка на стороне клиента. Я на самом деле работаю над интеграцией между Regula и Spring 3. Надеюсь, я смогу выпустить его когда-нибудь в ближайшее время (опять же, на работе и в школе). Интеграция работает путем перевода ограничений проверки Hibernate на ограничения проверки правильности. Таким образом, вам нужно только написать код проверки один раз (в основном). Однако для пользовательских ограничений вам все равно придется писать код на стороне Javascript (пользовательский валидатор). Но как только вы комментируете код на стороне сервера с ограничениями проверки Hibernate, вам не нужно ничего делать на стороне клиента; эти ограничения автоматически применяются для формирования элементов на стороне клиента.

Мэтью Эбботт также смог интегрировать Regula с ASP.NET MVC.

ОБНОВЛЕНИЕ # 2

У меня есть demo webapp (mavenized) на github, который демонстрирует интеграцию между Regula и Spring 3.0.x Web MVC используя Hibernate Validator. Это действительно не документировано или что-то еще, это более доказательство концепции. Я планирую добавить некоторую документацию на страницу github об интеграции и о том, как она работает.

ОБНОВЛЕНИЕ # 3

Я обновил документацию на wiki, и теперь она соответствует последней версии 1.2.2 (я сделал небольшое исправление, поэтому он 1.2.2).

Ответ 2

Я использовал этот jQuery formValidator несколько раз в сочетании с целым рядом различных сред. Я надеюсь, что это поможет, поскольку я редко проводил больше часа, настраивая его.

Ура!

Ответ 3

Я бы сказал, что плагин jQuery Validation отлично работает. Я объединил его с плагином metadata, чтобы передать параметры проверки на стороне сервера клиенту. Я также включил несколько ключевых моментов во все формы, чтобы я мог использовать общий шаблон для проверки и несколько исключительных/пользовательских состояний. Это включает в себя настраиваемое предупреждающее сообщение и отображение.

Он не делает все, что вы хотите, из коробки, но это лучший вариант и лучшее поведение по умолчанию, которое я видел. Опять же, я использую метаданные (атрибут "данные-мета" ) с ним. И это может быть согнуто по вашей воле. Я также использую метаданные для привязки управления к входным элементам на стороне клиента. Это разделяет мою клиентскую логику с серверной стороны, но проще в долгосрочной перспективе, пытаясь вставить js из логики на стороне сервера.

Ответ 4

Parsley.js выглядит хорошим и популярным выбором на момент написания статьи (август 2013 г.).

Ответ 5

Отвечая на это сам, так как кто-то из нашей команды заметил Validator из jQuery Tools!

• Презентация. Поддерживает поля ввода HTML5. pattern убедитесь, что пользователь может только ввести тест в определенном шаблоне.
• Побочные эффекты. Триггеры событий в форме и в отдельных полях: onFail и onSuccess
• Элементы, управляемые виджетами - поощряются "пользовательские типы ввода". Основная демоверсия включает в себя только натуральное число "возраст".
• Группы. Напишите "функциональный сопрягатель", единственной целью которого является фильтрация полей, которые должны быть проверены.
• Проверка на стороне сервера - делает это и делает это разумно - зависит от вашего валидатора, вызывающего обратный вызов (поэтому он несинхронный) вместо возвращаемого значения.
• Несколько форм на странице - jQuery Tools выглядит очень хорошо, и это не должно быть проблемой.
• Настраиваемая индикация ошибок. Ошибки рядом с полями? Все в одном месте? Нет проблем. Все еще не достаточно хорошо? Привязывать события к сбою. Даже использует всплывающие подсказки по умолчанию.
• Snappiness - демонстрации очень быстрые
• Отправить кнопки - нет проблем.

Обновление: Да, просто переработал кусок нашего сайта с помощью всплывающих подсказок инструментария jQuery Tools. Fantastic!

Ответ 6

Сканирование валидации на стороне сервера.

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

Ответ 7

Перейдите с плагинами проверки jQuery. Это никогда не подводило меня до сих пор.

Ответ 8

 function isEmpty(text) {
if(text == undefined) {
    return true;
}
if(text.replace(/\s+/g, ' ').length == 0) {
    return true;
}
return false;
}

function isValidBoolean(text) {
   if(text == undefined || (text.toLowerCase() != "true" &&    text.toLowerCase() != "false")) {
    return false;
}
return true;
 }

  function isValidDouble(text) {
     var out = parseFloat(text);
   if(isNaN(out)) {
    return false;
  }
  return true;
  }

  function isValidLong(text) {
var out = parseInt(text);
if(isNaN(out)) {
    return false;
}
return true;
}

 function isValidDate(text) {
if(Date.parseString(text, 'MM/dd/yyyy HH:mm:ss') == null) {
    return false;
}
return true;
}

  function hasDuplicates(array) {
var valuesSoFar = {};
for (var i = 0; i < array.length; ++i) {
    var value = array[i];
    if (Object.prototype.hasOwnProperty.call(valuesSoFar, value)) {
        return true;
    }
    valuesSoFar[value] = true;
}
return false;
}