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

【问题标题】：Validation using custom directive with angularjs使用带有 angularjs 的自定义指令进行验证
【发布时间】：2014-10-18 17:41:29
【问题描述】：

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

我尝试在指令中使用 Blur 事件来实现这一点，但这会导致即使在没有输入数据的情况下也会调用 vaidation。请告知是否可以在此处使用 Watch 功能，以及此处的任何示例 sn-p 将不胜感激。我在小提琴中编写了代码，该代码类似于我的指令，用于检查最小长度的输入字段之一（尽管有一个内置指令，以此为例）。可以在http://jsfiddle.net/4xbv0tgL/49/

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

【问题讨论】：

标签： angularjs validation angularjs-directive

【解决方案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;
                }
            });
        }
    };
});

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

【讨论】：