Как я могу проверить точную длину с помощью jQuery Validation?

Question

Используя плагин jQuery Validation для проверки форм, как бы вы подтвердили, что длина строки ровно X символов?

Answer 1

Поскольку в настоящее время нет встроенного метода для этого, вам необходимо добавить свой собственный метод. Это будет работать:

jQuery.validator.addMethod("exactlength", function(value, element, param) {
 return this.optional(element) || value.length == param;
}, $.validator.format("Please enter exactly {0} characters."));

Что может быть использовано следующим образом:

$("#formtovalidate").validate({
  rules: {
    somefield: {
      exactlength: 10
    }
   });

Обновление - Как это работает

Меня спросили, как это работает. Я не знаю всех деталей; Я смоделировал этот метод на ранее существующих. Однако это моя лучшая попытка объяснить это.

• Функция принимает значения value, element и param.
  • value - это значение, введенное в проверяемое поле
  • element само поле
  • param - это то, что следует за типом правила и двоеточием. В приведенном выше примере это 10 в exactlength: 10
• Следующая строка - это оператор return. Это даст окончательный вердикт метода валидации обратно к коду, который его вызвал. Любой метод проверки, который возвращает true, говорит «это поле проходит проверку!» Он вернет значение строки, в которой он находится.
• За return следуют два объявления, разделенные оператором 'или' (||).
  • Оператор || означает «оценить оставленный элемент». Если это правда, верните истину. Если нет, попробуйте тот, что справа. Если это правда, верните истину. В противном случае верните false.
    • Пункт слева - this.optional(element). Если элемент не требуется в ваших правилах, он вернет true, как и проверка. Что означает: «Если я не скажу вам, что это поле обязательно, мне все равно, проверяет ли оно».
    • Если поле является обязательным, мы переходим к правой стороне ||. Это фактический проверочный тест. Он сравнивает длину ввода поля с длиной, которую вы указали. Если они одинаковы, он возвращает true, метод возвращает true, и проверка проходит. В противном случае проверка не пройдена.

Вот и все. Для получения дополнительной помощи см. Документацию , в частности часть о пользовательских методах проверки .

Answer 2

пример:

rules : {
"someFieldName":{digits:true,minlength:20,maxlength:20}
}

Answer 3

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

<input data-rule-minlength="8" data-rule-maxlength="8" data-msg-minlength="Exactly 8 characters please" data-msg-maxlength="Exactly 8 characters please">

Answer 4

Можно также сделать так, чтобы существующий метод rangelength поддерживал точный диапазон, предоставляя динамическое сообщение, подобное этому:

$.extend($.validator.messages, {
    rangelength: function(args, inputElement) {
        var isExactRange, min, max;

        // Cast arguments as numbers
        min = Number(args[0]);
        max = Number(args[1]);

        isExactRange = min === max;

        if (isExactRange) {
            return 'Please enter exactly ' + min + ' characters.';
        }


        return 'Please enter between ' + min + ' and ' + max + ' characters.';
    }
);

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

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

Чтобы вернуться к стандартному сообщению rangelength, замените

'Please enter between ' + min + ' and ' + max + ' characters.'

с

$.validator.messages.rangelength

Было бы неплохо, если бы официальная документация была обновлена, поскольку в ней сложно ориентироваться, и она не описывает все функции плагина.