Question

给出以下输入字段：

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

如果用户未输入值，则required标记会在提交表单时显示错误。但是，我想对此字段进行一些额外的验证：创建新用户时，userName必须不存在。

使用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验证错误？

使用angular的常见方法似乎是有这样的自定义错误消息：

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

但后来我最终得到了两种不同风格的错误消息，我不想这样做。

如何利用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>

混合HTML5和自定义angularjs验证

1 个答案: