混合HTML5和自定义angularjs验证

Question

给定以下输入字段：

<input type="text" class="form-control" data-ng-model="selectedUser.userName" data-ng-hide="selectedUser.uuid" required name="userName">

如果用户没有输入值，则required标签将使浏览器在提交表单时显示一个很好的错误。但是，我想对此字段进行一些额外的验证：创建新用户时，用户名必须不存在。

使用 angular 进行实际验证非常简单：

$scope.submit = function() {
    userService.getByUserName($scope.selectedUser.userName, function(data) {
        if (!data) {
            $scope.userForm.userName.$setValidity("unique", false);
        }
    });
    if ($scope.userForm.$invalid) {
        return;
    }
    ...
}

在这种情况下，我该如何显示HTML5验证错误？

角度的常见方式似乎是有这样的自定义错误消息：

<span style="color:red" ng-show="userForm.userName.$error.unique">We have met before...</span>

但是，我最终会得到2种不同样式的错误消息，我不想要。

如何利用 HTML5 setCustomValidity()功能（允许您为 HTML5 验证设置自定义错误消息）？

Answer 1

您可以通过添加novalidate属性来删除 HTML5 验证。

<input type="text" class="form-control" data-ng-model="selectedUser.userName" data-ng-hide="selectedUser.uuid" required name="userName" novalidate>