登錄驗證和憑據使用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

回答

相關問題