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

我有一个有效的解决方案，可以在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>

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

---

有什么想法吗？

这可能是风格或偏好的问题，但我建议你试试。我很确信它提供了你想要的功能——特别是当冗余困扰你的时候

• AngularJS团队为您提供了一小套预定义的 您可以开箱即用的验证器，我建议您 查看他们在
• 在上有一篇很好的文章，内容更深入 查看并解释如何在1.3中完成此操作

有趣的部分 下面是一个简单而肮脏的例子，向您展示我的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
    .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
.module（'应用程序'）
.directive（'maxLength'，function（）{
返回{
要求：'ngModel'，
链接：功能（范围、要素、属性、ngModel）{
var maxLength=parseInt（attr.maxLength）；
//对于DOM->模型验证
ngModel.$parsers.unshift（函数（值）{
var有效性=验证（值）；
ngModel.$setValidity（'maxLength'，validity）；
返回有效期？值：未定义；
});
//用于模型->DOM验证
ngModel.$formatters.unshift（函数（值）{
var有效性=验证（值）；
ngModel.$setValidity（'maxLength'，validity）；
返回值；
});
函数验证（值）{
返回值.trim（）.length

下面是如何在Angular 1.3.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
    .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
.module（'应用程序'）
.directive（'maxLength'，function（）{
返回{
要求：'ngModel'，
链接：功能（范围、要素、属性、ngModel）{
var maxLength=parseInt（attr.maxLength）；
ngModel.$validators.maxLength（函数（值）{
返回验证（值，maxLength）；
});
函数验证（值，maxLength）{
返回值.trim（）.length

总结 现在，我向您展示的是一种方法，angular团队根据他们的文档考虑定制验证的方法，但是，一种尺寸不适合所有人，还有其他方法来进行验证。其中一种方法是使用第三方模块，如

---

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

非常有意义，是的，我想我可以通过使用一些内置验证程序的组合来简化代码。你的回答为我指明了正确的方向。谢谢你！谢谢Marcel，valdr看起来很棒，我肯定会将其用于web应用程序，但在移动应用程序中，验证错误和反馈需要以某种方式显示在输入本身中，而不是在其下方。除非我错过了，否则valdr不允许您配置它，例如高亮显示input.Hhmm中的图标，我不确定是否理解…而不是呈现您需要valdr在输入字段本身上设置CSS类的内容？这是内置的，显示如果您输入了无效的电子邮件地址，则输入字段具有CSS类

ng invalid ng invalid valdr email ng invalid valdr

。如果它是有效的，它们将是

ng valid valdr email ng valid ng valid valdr

。缺少的是根本不应该呈现模板？