Javascript 角度形式验证

我在验证过程中遇到了某些场景。我需要验证一个字段-“名字”。我一直使用的验证逻辑是-

• 如果字段是脏的，则根据正则表达式进行验证

ng show=“aspnetForm.FirstName.$dirty&&aspnetForm.FirstName.$error.nameValidate”

• 如果该字段标记为required（当前保留required字段完全取决于业务，因此我从JSON中读取true/false值），则用户可以尝试按原样提交表单

  ng show=“blankSubmit&&aspnetForm.FirstName.$error.required”

其中blankSubmit只是一个范围变量，我在单击submit按钮时将其设置为true

• 现在第三种情况是我没有得到的逻辑，即如果用户单击firstname文本框，然后没有弄脏它，只是模糊了，那么如果ng required设置为true，则应该显示验证消息。如果我只是放置

  ng show=“aspnetForm.firstname.$error.required”

  然后在页面加载本身上显示错误消息，这是我不希望看到的，因为它给用户提供了一个错误的用户体验
  我只想在属性ng required设置为true并且用户从文本框中模糊时显示错误消息

---

一个可能的解决方案是创建一个指令，将字段标记为已访问字段，然后您可以在ng show中检查该字段：

.directive('visited', function() {
    return{
        restrict: 'A',
        require: 'ngModel',
            link: function(scope, element, attrs, ngModel){
                element.bind('blur', function(){
                    scope.$apply(function() {
                        ngModel.visited = true;
                    });
            });
        }
    };
});

视图：

---

我建议您使用

ng消息

。您的HTML将如下所示：

<div ng-messages="aspnetForm.FirstName.$error" role="alert">
    <div ng-message="required">Please enter a value for this field.</div>
    <div ng-message="nameValidate">This field must be a valid.</div>
    ...
</div>

请为此字段输入一个值。
此字段必须是有效的。
...

---

如果您想根据某些变量使用required，我建议您使用此

。这应该是可行的，只有当设置了正确的值时，才应该验证必填字段。

我对angular实际上是个新手。因此，如果这是最好的做法，我将采取这一做法，但没有其他办法，除了创建一个指令来做soNot，我知道。您的表单包含无效字段，并且只希望在访问字段后显示错误消息。我不相信angular提供了处理这种情况的机制（如果有，那就好了！）。

<div ng-messages="aspnetForm.FirstName.$error" role="alert">
    <div ng-message="required">Please enter a value for this field.</div>
    <div ng-message="nameValidate">This field must be a valid.</div>
    ...
</div>