angularjs登录页面密码错误信息

Question

在管理门户的登录页面中，我想在输入的密码错误时显示相应的错误消息。 我在AngularJS开发了这个页面，AngularJS有谁做过，请帮帮我。

HTML 登录页面

    <div class="wrapper">
  <form class="form-signin">       
  <div class="form-signin-heading">
    <img src="Images/wellness-India-logo_0.png">
  </div>
  <input type="email" class="form-control" ng-model="user.emailid"   name="username" placeholder="Email Address" required="" autofocus="" />
  <input type="password" class="form-control" ng-model="user.password" name="password" placeholder="Password" required=""/>      
  <label class="checkbox">
   <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
  </label>
  <button id="login" class="btn btn-lg btn-primary btn-block" type="submit" ng-click="login()">Login</button>  
  <button id="clear" class="btn btn-lg btn-primary btn-block" type="reset">Clear</button> 
  </form>
</div>

登录脚本 function

   $rootScope.login = function () {
    $("#blockUi").modal("show");
    $http({
        method: 'GET',
        url: $rootScope.baseUri + "/adminLogin",
        params: {
            email: $rootScope.user.emailid,
            password: $rootScope.user.password
        }
    }).success(function (data, status, headers, config) {
        if (!data.found) {
            $("#blockUi").modal("hide");
        } else {
            $rootScope.fromLogin = true;
            $state.go('dashboard');
            $("#blockUi").modal("hide");
        }
    }).error(function (data, status, headers, config) {
    });       
}

Answer 1

嘿，这是登录页面验证的完整教程，请访问https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages

Answer 2

至于表单错误 go，您应该查看 ng-messages： https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages

例子：

    <input class="form-control input-lg" type="password" id="pw" name="pw" ng-model="user.pw" placeholder="Password" ng-minlength="8" required>
    <div ng-if="signupForm.pw.$dirty" ng-messages="signupForm.email.$error">
      <div ng-message="required">Your pw address is required.</div>
      <div ng-message="minlength">Your pw must be at least 8 characters.</div>
    </div>

另一方面，如果你的意思是如何处理从服务器发送到 angular 的“密码错误”错误，我建议使用 toastr。

它简单且可定制。 你只需要 bower 安装它，然后注入它： https://github.com/Foxandxss/angular-toastr

在您的 js 中，您会检查错误。 也许在 promise 之后的 a.catch() 中，或者有条件地在响应对象中发送错误消息：

  $rootScope.login = function () {
    $("#blockUi").modal("show");
    $http({
        method: 'GET',
        url: $rootScope.baseUri + "/adminLogin",
        params: {
            email: $rootScope.user.emailid,
            password: $rootScope.user.password
        }
    }).success(function (data, status, headers, config) {
        if (!data.found) {
            $("#blockUi").modal("hide");
        } else {
            $rootScope.fromLogin = true;
            $state.go('dashboard');
            $("#blockUi").modal("hide");
        }
    }).error(function (data, status, headers, config) {

       //handle error logic here: 

      //using toastr: 
       toastr.error(data);

      //traditional alert window MAKE SURE to inject "$window" into your controller
       $window.alert(data);
    });       
}

您可能希望首先使用 console.log('data', data) 来查看您希望在警报 window 中显示的字符串的确切位置。它可能在 data.message 等中。

此外，您可能会因为使用 $rootscope 而受到指责（被认为是不好的做法）。

较新版本的 angular 不使用 .success /.error，仅使用 then() 和 a.catch 来处理错误。

Answer 3

同名从。 您可以根据响应设置ng-invalid

$scope.user.pw.$setValidity("pw", false);