AngularJS服務器和客戶端表單驗證

Question

我在將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> 

...這是登錄功能：直到我提交表單，並得到一個404個狀態

$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狀態返回時，loginForm。$ invalid錯誤出現，但當我再次更改用戶名和密碼輸入時，客戶端驗證不會將表單狀態更改爲有效。

是否有一種標準的方式來做這種客戶端+服務器端驗證在相同的形式？

Answer 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> 

Answer 2

這裏有可能是有用的一個很好的服務器端驗證指令https://groups.google.com/forum/#!msg/angular/6v-AillQboI/D0OaZzV7Me0J