Question

我是angularjs的新手。我创建了简单的登录页面。代码工作正常，但我的验证和凭据有一些问题。我在很少的网站上找到了一些线索，但这些答案并没有为我的解决方案提供正确的信息。我面临的错误是在验证中。当我输入无效的 mailid 和密码时，应弹出错误消息。但我无法实现它。

HTML：

`<form ng-submit="loginform()" class="ng-scope ng-pristine ng-valid center" name="logform"><br/><br>`

    <div class="form-group col-md-4">
    <label form="emailinput"><b>Email</b></label>
       <input type="email" class="form-control" name="uname" id="emailinput" placeholder="you@example.com" ng-model="username" ng-pattern="emailFormat">
       <span ng-show="logform.uname.$dirty.username && loginform.uname.$invalid"></span>
       <span style="color: Red" ng-show="logform.uname.$valid">* Email is required</span>
       <span style="color: Red" ng-show="logform.uname.$error.username">* Invalid ID </span>
    </div>

    <div class="form-group col-md-4">
    <label form="pwdinput"><b>Password</b></label>
       <input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="password">
       <span style="color: red" ng-show="logform.pwd.$dirty && loginform.pwd.$invalid"></span>
       <span ng-show="logform.pwd.$error.$valid">* Password is required</span>
       <span ng-show="logform.pwd.$error.pwd">* Invalid Password</span>
    </div>
    <div class="col-md-4">
        <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
        <button class="btn btn-primary" ng-click="submit()" ng-Disabled="logform.username.$dirty && loginform.username.$invalid || logform.pwd.$dirty && loginform.pwd.$invalid">Login</button>
    </div>

AngularJs：

 `var app = angular.module('logapp',['toastr']);`
       app.factory('authentication', function() {
        return {
        isAuthenticated: false,
        user: null
      }
   });

 app.controller('credientials', function($scope,toastr,authentication) {
    $scope.loginform = function (username, password) {
    if ($scope.username === 'admin@evol.com' && $scope.password === '123') {
        authentication.isAuthenticated = true;
        $location.path("/home");
    } else {
      toastr.error('Invalid username and password');
    }
 };
});

Answer 1

请阅读下面的代码段并根据条件将代码更改为setValidity()。

var app = angular.module('logapp', []);
app.factory('authentication', function() {
  return {
    isAuthenticated: false,
    user: null
  }
});

app.controller('credientials', function($scope, authentication) {
  $scope.loginform = function(isValid) {
    $scope.logform.uname.$setValidity("username", true);
    $scope.logform.pwd.$setValidity("pwd", true);
    if (isValid) {
      if ($scope.username == 'admin@evol.com' && $scope.password == '123') {
        alert("success");
        authentication.isAuthenticated = true;
      } else {
        $scope.logform.uname.$setValidity("username", false);
        $scope.logform.pwd.$setValidity("pwd", false);
      }
    }

  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="logapp" ng-controller="credientials">
  <form ng-submit="loginform(logform.$valid)" class="ng-scope ng-pristine ng-valid center" name="logform" novalidate role="form">

    <div class="form-group col-md-4">
      <label form="emailinput"><b>Email</b></label>
      <input type="email" class="form-control" name="uname" id="emailinput" placeholder="you@example.com" ng-model="username" ng-pattern="emailFormat" required>
      <span style="color: Red" ng-show="logform.$submitted && logform.uname.$error.required">* Email is required</span>
      <span style="color: Red" ng-show="logform.$submitted && logform.uname.$error.username">* Invalid ID </span>
    </div>

    <div class="form-group col-md-4">
      <label form="pwdinput"><b>Password</b></label>
      <input type="password" class="form-control" name="pwd" id="pwdinput" placeholder="*******" ng-model="password" required>
      <span ng-show="logform.$submitted && logform.pwd.$error.required">* Password is required</span>
      <span ng-show="logform.$submitted && logform.pwd.$error.pwd">* Invalid Password</span>
    </div>
    <div class="col-md-4">
      <button type="cancel" class="btn" ng-click="toggle_cancel()">Cancel</button>
      <button class="btn btn-primary" type="submit">Login</button>
    </div>
  </form>
</body>

使用angularjs

1 个答案: