Question

我有一个工作解决方案，用于在angularjs中以表格形式验证keyup上的每个字段。我觉得它可能会更好。还有更聪明的方法吗？

HTML：

     <input type="text" placeholder="First Name" ng-keyup="validateFirstName($event) "ng-model="user.firstName"/>
      <i ng-class="firstNameValidation" class="icon placeholder-icon padding"></i>
     <input type="text" placeholder="Last Name"/>
     <i ng-class="lastNameValidation" class="icon placeholder-icon padding"></i>
     <input type="email" placeholder="Email"/>
     <i ng-class="emailValidation" class="icon placeholder-icon padding"></i>

在控制器中我有：

$scope.user = {}
$scope.firstNameValidation = "ion-arrow-left-a text-danger"
$scope.lastNameValidation = "ion-arrow-left-a text-danger"
$scope.emailValidation = "ion-arrow-left-a text-danger"


$scope.validateFirstName = ($event) ->
  if $scope.user.firstName.trim().length > 2
    $scope.firstNameValidation = "ion-checkmark-circled text-success"
  else
    $scope.firstNameValidation = "ion-arrow-left-a text-danger"

...

依此类推，输入验证的每个字段的函数。我觉得有太多的冗余。

有什么想法吗？

Answer 1

这可能是风格或偏好的问题，但我建议你试试valdr。我确信它提供了您正在寻找的功能 - 特别是如果冗余困扰您。

Answer 2

AngularJS团队为您提供了一小组预定义的   你可以开箱即用的验证器，我建议你采取   看看他们的文档   https://docs.angularjs.org/api/ng/directive/input

在year of moo处有一篇很棒的文章，更深入   查看和解释如何在1.3
中完成此操作

有趣的部分

这是一个简单而肮脏的plunkr向您展示1.2.x的行动方式

给出以下模板

<form name="myForm">
     <!-- Notice my custom validator named max-length -->
     <input type="text" name="firstName" ng-model="firstName" 
            max-length="20"
            ng-class="myForm.firstName.$error.maxLength ? 'ion-arrow-left-a text-danger' : 'ion-checkmark-circled text-success'" 
     />
</form>

这里是如何在Angular 1.2.x

中完成的

angular
    .module('App')
    .directive('maxLength', function() {

        return {
            require: 'ngModel',
            link: function(scope, elem, attr, ngModel) {
                var maxLength = parseInt(attr.maxLength);

                //For DOM -> model validation
                ngModel.$parsers.unshift(function(value) {
                    var validity = validate(value);
                    ngModel.$setValidity('maxLength', validity);
                    return validity ? value : undefined;
                });

                //For model -> DOM validation
                ngModel.$formatters.unshift(function(value) {
                    var validity = validate(value);
                    ngModel.$setValidity('maxLength', validity);
                    return value;
                });

                function validate(value) {
                    return value.trim().length < maxLength;
                }
            }
        };
});

以及如何在Angular 1.3.x中完成

angular
    .module('App')
    .directive('maxLength', function() {

        return {
            require: 'ngModel',
            link: function(scope, elem, attr, ngModel) {
                var maxLength = parseInt(attr.maxLength);

                ngModel.$validators.maxLength(function(value) {
                    return validate(value, maxLength);
                });

                function validate(value, maxLength) {
                   return value.trim().length < maxLength;
                }
            }
        };


});

结束

现在，我向您展示的是一种方式，以及角度团队根据他们的文档认为自定义验证的方式，但是，一种尺寸并不适合所有人，还有其他方法可以做到这一点验证。一种方法是使用第三方模块，如Marcel-Stör mentioned in his answer.

祝你在使用angularjs掌握自定义验证的过程中祝你好运：）

有没有更好的方法来验证这种角度形式？

2 个答案:

有趣的部分

结束