Question

我必须使用正则表达式验证输入字段（类型编号）的用户输入。

我会发现以下动态值：

最小：我已经用angular
最大值：我已经用angular
增量：＆lt; - 我的问题

一个例子：最低：10;最大值：100;增量：10

动态增量为10的允许用户输入应为：

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

其他例子：

最小值：0;最大值：2000;增量：100
最小值：1;最大值：3.4;增量：0.2

我已经尝试了几个正则表达式，但是甚至没有使用动态值（不同的数字长度/小数）。也许更容易让一个带数字，一个带小数的数字。

感谢您的帮助！

Answer 1

将input标记与适当的属性一起使用。 HTML5为您提供了step attribute。

<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 />

Answer 2

快速回答你的问题（因为你说过角度，我认为你需要它用于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作为工具用于字符串模式检查\匹配等...它不太适合数值计算，所以也许你应该考虑其他方法进行验证。例如 - 使用remainder运算符

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

通过这种方式，您可以更轻松地维护代码。

Answer 3

你是对的。现在我将步长值设置为hjpotter92并添加一些逻辑，如Nikita Kurtin所述。 Angular无法验证开箱即用的步骤..

<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 );
}

我希望我可以用我的解决方案帮助别人。

正则表达式检查输入字段（angularJs）的动态增量？

3 个答案: