使用自定义指令与angularjs的验证

我有一个表单与输入字段，并有一个自定义指令为每个输入字段验证输入的数据user.Requirement是，当用户离开输入字段与无效的数据，错误信息是显示。但是，很少的字段是可选的，如果用户跳过输出这些字段的任何数据，则不需要验证。使用自定义指令与angularjs的验证

我试图在指令中使用Blur事件来实现这一点，但是这导致甚至在没有输入数据的情况下调用vaidation。请告知如果Watch功能可以在这里使用，任何样本片段在这里将不胜感激。我在一个小提琴中写了代码，它与我的指令类似，用于检查最小长度的输入字段之一（尽管有一个内置指令，以此为例）。此小提琴可以在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(); 
       } 
      ); 
     } 
    }; 
});

来源

2014-10-18 user4157127

我觉得你已经过了复杂的生活了。你为什么不使用多个指令进行多重检查？

<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或更高版本。因为0123中不存在$touched和$untouched。

来源

2014-10-18 19:35:03

使用自定义指令与angularjs的验证

回答

相关问题