Я пытаюсь написать валидатор Less than для jQuery.

Я хочу сравнить одно текстовое поле с другим, поэтому, если у меня есть:

<input type="text" id="value1" /> <input type="text" id="value2" />

Я хочу, чтобы мой validator выглядел как

$('#myForm').validate({rules: { value1: { lessThan: "#value2" } } });

Я пробовал это, но не могу заставить его работать:

$.validator.addMethod('lessThan', function(value, element, param) {
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i >= j;
}, "Less Than");

Другой вопрос: куда мне поместить этот код? В $(document).ready или только в теге <script>?

9
John Oxley 11 Авг 2009 в 19:09

5 ответов

Лучший ответ

Я идиот. Я допустил опечатку в собственном коде и испортил this.optional (element), который я вижу во многих методах валидатора. Вот рабочая функция:

$.validator.addMethod('lessThanEqual', function(value, element, param) {
    if (this.optional(element)) return true;
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i <= j;
}, "The value {0} must be less than {1}");

Вот сокращенная версия

$.validator.addMethod('lessThanEqual', function(value, element, param) {
    return this.optional(element) || parseInt(value) <= parseInt($(param).val());
}, "The value {0} must be less than {1}");

Теперь мне нужно выяснить, как повторно запустить проверку для поля 1, когда я меняю field2.

18
John Oxley 11 Авг 2009 в 15:57

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

$('#myForm').validate({
    rules: {
         value1: {
             maxlength: $('#value2').val().length
         }
    }
});

$('#value2').change(function() {
    $('#value1').rules('remove', 'maxlength').rules('add', {
         maxlength: $('#value2').val().length
    });
});

Или даже лучше без дублирования кода

function getRule() {
    return {
        maxlength: $('#value2').val().length
    };
}

$('#myForm').validate({
    rules: {
         value1: getRule()
    }
});

$('#value2').change(function() {
    $('#value1').rules('remove', 'maxlength').rules('add', getRule());
});
2
RaYell 11 Авг 2009 в 15:21

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

$().ready(function() {

    $.validator.addMethod("lessThan",
        function(value, element, param) {
            var i = parseFloat(value);
            var j = parseFloat(param);
            return (i < j) ? true : false;
        }
    );

});

Я постарался сделать это простым, чтобы вы могли его модифицировать. Если метод называется "lessThan", он должен делать именно это. Если ваш метод действительно выполняет «меньше или равно», подумайте о более подходящем имени.

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

Изнутри вашего валидатора вы использовали его правильно; поэтому для проверки, скажем, менее 10:

$('#myForm').validate({ rules: { value1: { lessThan: "10"}} });

Удачи!

1
FerrousOxide 11 Авг 2009 в 15:37

Считайте, что (A) - это имя ввода, значение которого должно быть меньше ввода (#B). этот код работал со мной после того, как я сделал два типа входных данных: type="number"

$("#form").validate({
    rules: {
        A: {
            lessThan: "#B"
        }
    }
});
1
Moaaid Jamal 24 Дек 2019 в 07:33

Я думаю, что лучше использовать атрибут HTML max.

<input type="number" placeholder="Marks" required name="marks" max="100">

Проверка будет: Пожалуйста, введите значение, меньшее или равное 100. Вы также можете изменить максимальное значение на 99 только для менее 100 значений.

0
طلحة 6 Янв 2019 в 07:25