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>

登录功能的脚本

   $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

就形式错误而言，您应该查看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>

另一方面，如果你的意思是如何处理错误的密码＆＃34;从服务器发送到角度的错误，我建议使用toastr。

它易于定制。你只需要打包安装它，然后注入它： https://github.com/Foxandxss/angular-toastr

在你的js中你检查是否有错误。也许在承诺之后的.catch（）中，或者有条件地在响应obj中发送错误消息：

  $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);
    });       
}

您可能首先想要控制台.log（＆＃39;数据＆＃39;，数据）以确切地查看您希望在警报窗口中显示的字符串的位置。它可能在data.message等中。

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

较新版本的angular不使用.success / .error，只使用.then（）和.catch作为错误。

在angularjs的登录页面中密码错误的消息

2 个答案: