我在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错误会显示出来,但是客户端验证在我再次更改用户名和密码输入时不会将表单状态改回有效状态。
有没有标准的方式可以在同一个表单中进行这种客户端+服务器端验证?
$setValidity
方法。一个在表单控制器上,另一个在ngModel控制器上。问题是,第一个是内部方法,你不应该直接调用它(它实际上需要三个参数)。所以你应该像这样做:username.$setValidity('validCredentials', false)
- pavelgj