angularjs를 사용하여 로그인 확인 및 자격증 명

나는 angularjs를 처음 사용합니다. 간단한 로그인 페이지를 만들었습니다. 코드가 제대로 작동하지만 유효성 검사 및 자격 증명에 문제가 있습니다. 나는 몇몇 사이트에서 몇 가지 실마리를 발견했지만, 그 답은 내 솔루션을위한 적절한 정보를 제공하지 않습니다. 내가 직면 한 오류는 유효성 확인에 있습니다. 잘못된 mailid 및 비밀번호을 입력하면 오류 메시지가 나타납니다. 그러나 나는 그것을 성취 할 수 없었다.angularjs를 사용하여 로그인 확인 및 자격증 명

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="[email protected]" 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 === '[email protected]' && $scope.password === '123') { 
     authentication.isAuthenticated = true; 
     $location.path("/home"); 
    } else { 
     toastr.error('Invalid username and password'); 
    } 
}; 
});

출처

2017-10-06 phoine

가 친절하게 아래의 조각을 읽고 조건에 따라 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 == '[email protected]' && $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="[email protected]" 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>

출처

2017-10-06 12:23:12 Sajal

angularjs를 사용하여 로그인 확인 및 자격증 명

답변

관련 문제