Question

我有一个带有输入字段的表单，并且每个输入字段都有一个自定义指令来验证user输入的数据。要求当用户使用无效数据离开输入字段时，将显示错误消息。但是，很少有这些字段是可选的，如果用户跳过而没有输入这些字段的任何数据，则不需要验证。

我试图在指令中使用Blur事件来实现它，但是即使没有输入数据，也会导致调用vaidation。请告知此处是否可以使用Watch功能，此处的任何样本片段都将受到赞赏。我在一个小提琴中编写代码，类似于我的指令，用于检查最小长度的输入字段之一（尽管有一个内置指令，以此为例）。这个小提琴可以在{{3}访问}

 <div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm">
        Num1: <input type="text" ng-model="num1" my-min-length="5"  name="num1" />
        <span class="error" ng-hide="myForm.num1.$valid"
        ng-show="myForm.num1.$error">Invalid Number!</span>
         <br />
        Num2: <input type="text" ng-model="num2" my-min-length="5" name="num2" />
         <span class="error" ng-hide="myForm.num2.$valid"
        ng-show="myForm.num2.$error">Invalid Number!</span>

    </form>
</div>

var myApp = angular.module("myApp", []);

var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) {
    $scope.num1 = "12345";
    $scope.num2 = "55555";
}]);

myApp.directive("myMinLength", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attr, ngModelCtrl) {
          var minlength = Number(attr.myMinLength);
                var inputparse = function (inputtext) {
                    if ((inputtext.length >= minlength) && (!isNaN(inputtext))) {
                        return inputtext;

                    }
                    return undefined;
                }
                ngModelCtrl.$parsers.push(inputparse);

                element.bind("blur", function () {

                    var value = inputparse(element.val());
                    var isValid = !!value;
                    if (isValid) {
                        ngModelCtrl.$setViewValue(value);
                        ngModelCtrl.$render();

                    }
                    ngModelCtrl.$setValidity("myMinLength", isValid);
                    scope.$apply();
                }
             );
        }
    };
});

Answer 1

我认为你为自己过度复杂的生活。为什么不直接使用多个指令进行多次检查？

<div ng-app="myApp"
     ng-controller="myCtrl">
    <form name="myForm"
          novalidate>
        Num1:
        <input type="text"
               ng-model="num1"
               ng-minlength="5"
               integer 
               name="num1"
               required/> 
        <span class="error"
              ng-show="myForm.num1.$invalid&&myForm.num1.$touched">Invalid Number!</span>
    </form>
</div>

这是integer指令：

var INTEGER_REGEXP = /^[0-9]*$/;
myApp.directive('integer', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (viewValue === "") {
                    ctrl.$setValidity('integer', true);
                    return viewValue;
                } else if (INTEGER_REGEXP.test(viewValue)) {
                    ctrl.$setValidity('integer', true);
                    return viewValue;
                } else {
                    ctrl.$setValidity('integer', false);
                    return viewValue;
                }
            });
        }
    };
});

请确保您使用的是角1.3或更新的版本。因为1.2中不存在$touched和$untouched。

使用带有angularjs的自定义指令进行验证

1 个答案: