angularjs验证输入并防止更改(如果无效)

Question

我需要一个输入字段,我只能输入值1,2或3,因此我正在尝试构建一个指令,如果它与这些值不匹配,则会阻止对模型的所有更改.
例如,值为1,我将其更改为5,它应该仍为1.

我把一个小小提琴http://jsfiddle.net/kannix/Q5YKE/放在一起但是使用$解析器很可能是错误的.

app.directive('myvalidator', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            var validValues = [1,2,3];
            ctrl.$parsers.push(function (value) {
                if (validValues.indexOf(value) === -1){
                    //what to do here? should refuse wrong value and leave the old one
                }   
            });
        }
    }   

})

Answer 1

我最近为此写了一个指令.它需要一个regExp对象来验证传入的按键,并且只有在有效时才允许它们:

// forces keystrokes that satisfy the regExp passed
app.directive("regExpRequire", function() {

    var regexp;
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            regexp = eval(attrs.regExpRequire);

            var char;
            elem.on("keypress", function(event) {
                char = String.fromCharCode(event.which)
                if(!regexp.test(elem.val() + char))
                    event.preventDefault();
            })
        }
    }

})

模板用法: <input type="text" reg-exp-require="/^[a-zA-Z]$/">

或者在你的情况下: <input type="text" reg-exp-require="/^[1-3]*$/">

Answer 2

我建议使用该ng-pattern-restrict指令.

获取库并简单地装饰您的输入:

<input type="text" pattern="[0-9]+" ng-pattern-restrict />

GitHub:AlphaGit/ng-pattern-restrict