是否有更好的方法来验证此 angular 表单？

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

The AngularJS team provide you with a small set of predefined validators that you can use out of the box and I recommend you to take a look at their documentation at https://docs.angularjs.org/api/ng/directive/input

There's a great article over at year of moo with a more in-depth view and explanation on how this is done in 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;
                }
            }
        };


});

总结

现在，我向您展示的是一种方法，angular 团队根据他们的文档考虑自定义验证的方法，但是，一种尺寸并不适合所有人，还有其他方法可以做这个验证。一种这样的方法是使用像

这样的第三方模块

祝您在 angularjs 中掌握自定义验证的道路上好运:)

是否有更好的方法来验证此 angular 表单？

Is there a better way to validate this angular form?

angularjs

ionic-framework

有趣的部分

总结