AngularJS 服务器和客户端表单验证答案

【问题标题】：AngularJS server and client side form validationAngularJS 服务器和客户端表单验证
【发布时间】：2012-12-19 05:37:38
【问题描述】：

在 AngularJS 中结合客户端验证和服务器端验证时遇到了一些麻烦。这是 HTML：

<form class="form-login" name="loginForm" novalidate ng-submit="login()">
    <fieldset>
        <h2>Login</h2>
        <input type="text" required class="input-block-level" placeholder="Username" ng-model="username" name="username">
        <div ng-show="loginForm.username.$dirty && loginForm.username.$invalid">
            <span ng-show="loginForm.username.$error.required">Username required.</span>
        </div>
        <input type="password" required class="input-block-level" placeholder="Password" ng-model="password" name="password">
        <div ng-show="loginForm.password.$dirty && loginForm.password.$invalid">
            <span ng-show="loginForm.password.$error.required">Password required.</span>
        </div>
        <div ng-show="loginForm.username.$dirty && loginForm.password.$dirty && loginForm.$invalid">
            <span>Invalid username or password</span>
        </div>
        <p><a href="#forgotPassword" data-toggle="modal" class="btn btn-link">Forgot password?</a></p>
        <p><button class="btn btn-primary btn-large" ng-disabled="loginForm.$invalid" type="submit">Login</button></p>
    </fieldset>
</form>

...这里是登录功能：

$scope.login = function() {
    $http.post('url', {
        "password": $scope.password
    }).success(function(data, status, headers, config) {
        console.log(status);
        console.log(data);
    }).error(function(data, status, headers, config) {
        if (404 === status) {
            $scope.loginForm.$invalid = true;
        }
    });
    return false;
}

在我提交表单并返回 404 状态之前，客户端验证工作正常。当返回 404 状态时，会显示 loginForm.$invalid 错误，但当我再次更改用户名和密码输入时，客户端验证不会将表单状态更改回有效。

有没有一种标准的方法可以以相同的形式进行这种客户端+服务器端的验证？

【问题讨论】：

标签： javascript mvvm validation angularjs

【解决方案1】：

我认为您不应该直接修改表单$invalid 或$valid。您应该通过$setValidity(validationErrorKey, isValid) 进行操作。

为什么不将“无效的用户名/密码”状态存储在单独的范围属性中？

$scope.login = function() {
    $http.post('url', {
        "password": $scope.password
    }).success(function(data, status, headers, config) {
        console.log(status);
        console.log(data);
    }).error(function(data, status, headers, config) {
        if (404 === status) {
            $scope.invalidUsernamePassword = true; // <--------------
        }
    });
    return false;
}

而且模板会更简单：

<div ng-show="invalidUsernamePassword">
    <span>Invalid username or password</span>
</div>

【讨论】：

你真的有一点：) 在我在这里发布我的问题之前，我尝试做 $scope.loginForm.$setValidity('somekey', false) 结果是它创建了 $scope。 loginForm.$error.somekey 等于未定义。我可能没有做对。你有什么想法吗？
@lucassp 有两个$setValidity 方法。一个在表单控制器上，另一个在 ngModel 控制器上。问题是，第一个是内部方法，你不应该直接调用它（它实际上需要三个参数）。所以你应该这样做：username.$setValidity('validCredentials', false)

【解决方案2】：

这是一个不错的服务器端验证指令，可能有用https://groups.google.com/forum/#!msg/angular/6v-AillQboI/D0OaZzV7Me0J

【讨论】：