javascript – AngularJS表单验证指令,用于显示输入错误

前端之家收集整理的这篇文章主要介绍了javascript – AngularJS表单验证指令,用于显示输入错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要创建一个验证指令,以自动显示每个输入的所有输入错误.
此验证指令应显示当前所有错误,并在用户输入时自动更新错误列表.

如果输入是脏的,我需要显示输入的所有错误,而不是空且无效.我需要将所有错误添加到该输入元素附近的html元素中.

例如,如果输入有type =“email”和ng-minlength =“5”,用户键入“abc”,我需要在此输入附近显示此类错误:“无效的电子邮件;请输入至少5个字符;’

例如,如果input具有type =“number”attr和min =“200”,min-model =“minnumber”,并且minnumber模型设置为“300”,用户键入“100”,则需要在此输入附近显示此类错误:请输入最少500个;应该大于Min Number;

另外,如果更新相关模型(min-model param),我还需要更新上一个示例中所有输入的错误消息.

var app = angular.module('app',[]);

app.controller('appCtrl',function ($scope) {

});

app.directive('validate',function () {
    return {
        restrict: 'A',require: 'ngModel',// require:  '^form',link: function (scope,element,attrs,ctrl) {
            console.log('======================');
            console.log(scope);
            console.log(element);
            console.log(attrs);
            console.log(ctrl);
            console.log(scope.form.$error);
            angular.forEach(scope.form.$error,function (value,key) {
                console.log('scope.form.$error = ' + key + ': ' + value);
                console.log(value);
            });

        }
    };
});


app.directive('positiveInteger',ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                var INTEGER_REGEXP = /^\d+$/;
                if (INTEGER_REGEXP.test(viewValue)) { // it is valid
                    ctrl.$setValidity('positiveInteger',true);
                    return viewValue;
                } else { // it is invalid,return undefined (no model update)
                    ctrl.$setValidity('positiveInteger',false);
                    return undefined;
                }
            });
        }
    };
});


app.directive('positiveFloat',ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                var FLOAT_REGEXP = /^(?:[1-9]\d*|0)?(?:\.\d+)?$/;
                if (FLOAT_REGEXP.test(viewValue)) { // it is valid
                    ctrl.$setValidity('positiveInteger',false);
                    return undefined;
                }
            });
        }
    };
});


app.directive('minModel',ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (viewValue > scope[attrs.minModel]) { // it is valid
                    ctrl.$setValidity('minModel',return undefined (no model update)
                    ctrl.$setValidity('minModel',false);
                    return undefined;
                }
            });

        }
    };
});

你能帮助做出这个验证指令吗?

或者你可以指出我正确的方向吗?

Link to JSFiddle with some code for testing.

附:类似于UI-Utils,但是它们的指令不能在一个地方设置类似的错误消息.

解决方法

看看ng-messages directive.它相当优雅.例:
<form name="myForm">
  <input type="text" ng-model="field" name="myField" required minlength="5" />
  <div ng-messages="myForm.myField.$error">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">The value entered is too short</div>
  </div>
</form>

然后,您可以将其与任何表单验证相结合.只需将来自验证器的错误消息放在元素$error对象上,并在UI中自动呈现.

猜你在找的JavaScript相关文章