Регулярное выражение, которое проверяет динамические приращения на полях ввода (angularJs)?

0

Я должен проверять ввод пользователя в поле ввода (номер типа) с помощью регулярного выражения.

Я вижу следующие динамические значения:

  • минимум: я уже проверяю, что с угловыми
  • Максимум: я уже проверяю, что с угловым
  • increment: <- моя проблема

Пример: минимум: 10; максимум: 100; приращение: 10

Допустимый пользовательский ввод с динамическим шагом 10 должен быть:

10 - 20 - 30 - 40 - 50 - 60 - 70 - 80 - 90 - 100

Другие примеры:

  • минимум: 0; максимум: 2000; приращение: 100
  • минимум: 1; максимум: 3,4; приращение: 0,2

Я пробовал несколько выражений регулярных выражений, но даже один не работал с динамическими значениями (разная длина/десятичная). Может быть, проще иметь один с числами и один для чисел с десятичной точкой.

Спасибо за помощь!

  • 0
    Почему вам нужно использовать регулярные выражения здесь?
  • 6
    I have to validate the user input of an input field (type number) with a regex. , Нет, ты не обязан . Кто бы ни сказал вам, это неправильно. Сделай это другим способом. Связано: когда не следует использовать регулярные выражения
Теги:
validation
input-field

3 ответа

3

Используйте тег input с соответствующими атрибутами. HTML5 предоставляет вам атрибут step.

<input type="number" min=10 max=100 step=10 />
<input type="number" min=0 max=2000 step=100 />
<input type="number" min=0 max=3.4 step=0.2 />
  • 0
    Спасибо за Ваш ответ. Это помогло мне решить проблему с помощью угловых (см. Мой ответ).
0

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

<input type="number" step="10" validate-step />

Затем я написал парсер:

angular
    .module( '....validateStep', [] )
    .directive( 'validateStep', ValidateStepDirective );

/**
 * @namespace ValidateStepDirective
 * @example <validate-step></validate-step>
 * @memberOf Directives
 */
function ValidateStepDirective(){
    return {
        require: 'ngModel',
        link: ValidateStepDirectiveController
    };
}

function ValidateStepDirectiveController( scope, element, attrs, ctrl ){
    var step;
    if( attrs.step) {
        step = parseFloat( attrs.step );
    }

    function isValidStep( value, step ) {
        var checkValue = value * 100;
        // fixing js multiplication issue (2.3*100=229.999999)
        checkValue = checkValue.toFixed(0);
        var checkStep = step * 100;
        return checkValue%checkStep  === 0;
    }

    function stepValidator(viewValue){
        if( step && isValidStep(viewValue, step) ){
            ctrl.$setValidity( 'step', true );
            return viewValue;
        }else{
            ctrl.$setValidity( 'step', false );
            // if invalid, return undefined
            // (no model update happens)
            return;
        }
    }

    ctrl.$parsers.unshift( stepValidator );
}

Надеюсь, я смогу помочь другим в решении.

0

Быстро ответьте на свой вопрос (поскольку вы сказали, что угловатый, я полагаю, вам это нужно для JS):

function tenToHundred(num){
    return /^[1-9]{1}0{1}$|^100$/.test(num);
}
for(var i=1;i<=11;i++)console.log(tenToHundred(i*10));//10 ~ 100 test

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

function tenToHundred(num){
    var min=10, max=100, increment=10;//when need to maintain - just change those
    return num>=min && num<=max && num%increment==0;
}
for(var i=1;i<=10;i++)console.log(tenToHundred(i*10));//10 ~ 100 tests

Таким образом, вам будет проще поддерживать код.

  • 0
    Спасибо за Ваш ответ. Это помогло мне решить проблему с помощью угловых (см. Мой ответ).

Ещё вопросы

Сообщество Overcoder
Наверх
Меню