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

Question

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

我收到以下动态值：

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

一个例子：最少：10；最大值：100；增量：10

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

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

其他示例：

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

我已经尝试了几个正则表达式，但甚至没有一个使用动态值（不同的数字 length/decimal）。一个带数字，一个带小数可能更容易。

感谢您的帮助！

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

快速回答你的问题（既然你说 angular，我假设你需要它用于 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 作为一种工具适用于字符串模式 checks\matches 等...它不太适合数字计算，因此也许您应该考虑其他验证方法. 例如 - 使用 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)？

Regular expression that checks dynamic increments on input fields (angularJs)?

javascript

regex

validation

input-field

angularjs