快捷導(dǎo)航

Ionic+AngularJS實(shí)現(xiàn)登錄和注冊(cè)帶驗(yàn)證功能

更新時(shí)間：2017年02月09日 17:09:54 作者：Eveweiscsdn

這篇文章主要介紹了Ionic+AngularJS實(shí)現(xiàn)登錄和注冊(cè)帶驗(yàn)證功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

登錄：

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
  <title></title> 
  <link rel="manifest" href="manifest.json" rel="external nofollow" > 
  <!-- un-comment this code to enable service worker 
  <script> 
   if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('service-worker.js') 
     .then(() => console.log('service worker installed')) 
     .catch(err => console.log('Error', err)); 
   } 
  </script>--> 
  <link href="lib/ionic/css/ionic.css" rel="external nofollow" rel="stylesheet"> 
  <link href="css/style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet"> 
  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
  <link href="css/ionic.app.css" rel="external nofollow" rel="external nofollow" rel="stylesheet"> 
  --> 
  <!-- ionic/angularjs js --> 
  <script src="lib/ionic/js/ionic.bundle.js"></script> 
  <!-- cordova script (this will be a 404 during development) --> 
  <script src="cordova.js"></script> 
  <!-- your app's js --> 
  <script src="js/app.js"></script> 
  <script src="js/Login.js"></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
  <ion-pane> 
    <ion-content> 
      <div class="bar bar-header "> 
        <div class="h1 title">用戶登錄</div> 
      </div> 
      <div class="content has-header"> 
        <form ng-submit="onSubmit(myForm.$valid)" name="myForm" novalidate> 
          <div class="list"> 
            <div class="item-input-inset"> 
              <label class="item-input-wrapper"> 
                <i class="icon ion-person"></i> 
                <input type="text" name="user" id="user" ng-model="user" placeholder="用戶名" required> 
                <div ng-show="myForm.user.$invalid && submitted"> 
                  <div style="color:red" ng-show="myForm.user.$error.required">用戶名是必須的</div> 
                </div> 
              </label> 
            </div> 
            <div class="item-input-inset"> 
              <label class="item-input-wrapper"> 
                <i class="icon ion-locked"></i> 
                <input type="password" name="password" ng-model="password" id="password" placeholder="密碼" required> 
                <div ng-show="myForm.password.$invalid && submitted"> 
                  <div style="color:red" ng-show="myForm.password.$error.required">密碼是必須的</div> 
                </div> 
              </label> 
            </div> 
          </div> 
          <div class="padding"> 
            <button class="button button-full button-dark" type="submit">登錄</button> 
          </div> 
        </form> 
      </div> 
   </ion-content> 
  </ion-pane> 
  <script> 
 'use strict';   
 var myApp = angular.module('myApp',[]); 
myApp.controller('myCtrl',['$scope', '$http',function($scope, $http){ 
 // $scope.formModel = {}; 
 $scope.submitted = false; 
 $scope.onSubmit = function(){ 
  if ($scope.myForm.$valid) { 
    var param = { 
        User: $scope.user, 
        Pwd: $scope.password 
      } 
    $http.post('someurl',param) 
   .success(function(data){ 
    console.log(':)'); 
   }) 
   .error(function(data){ 
    console.log(':('); 
   }); 
  console.log(param); 
}else{ 
  $scope.submitted = true; 
} 
 } 
}]); 
  </script> 
 </body> 
</html>

不填寫信息登錄就會(huì)如圖所示：

注冊(cè)：

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
  <title></title> 
  <link href="lib/ionic/css/ionic.min.css" rel="external nofollow" rel="stylesheet"> 
  <link href="css/style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet"> 
  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above  
  <link href="css/ionic.app.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">  
  --> 
  <!-- ionic/angularjs js --> 
  <script src="lib/ionic/js/ionic.bundle.js"></script> 
  <!-- cordova script (this will be a 404 during development) --> 
  <script src="cordova.js"></script> 
  <!-- your app's js --> 
  <script src="js/app.js"></script> 
  <script src="js/Register.js"></script> 
  <!-- <script src="js/controllers.js"></script> 
  <script src="js/services.js"></script> --> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
  <!--  
   The nav bar that will be updated as we navigate between views.  
  --> 
  <!--  
   The views will be rendered in the <ion-nav-view> directive below  
   Templates are in the /templates folder (but you could also  
   have templates inline in this html file if you'd like).  
  --> 
  <ion-nav-view> 
    <ion-content> 
      <div class="bar bar-header "> 
        <div class="h1 title">用戶注冊(cè)</div> 
      </div> 
      <div class="content has-header"> 
        <form ng-submit="onSubmit(myForm.$valid)" name="myForm" novalidate> 
          <div class="list"> 
            <div class="item-input-inset"> 
              <label class="item-input-wrapper"> 
                <i class="icon ion-person"></i> 
                <input type="text" name="user" id="user" ng-model="user" placeholder="用戶名" required> 
                <div ng-show="myForm.user.$invalid && submitted"> 
                  <div style="color:red" ng-show="myForm.user.$error.required">用戶名是必須的</div> 
                </div> 
              </label> 
            </div> 
            <div class="item-input-inset"> 
              <label class="item-input-wrapper"> 
                <i class="icon ion-locked"></i> 
                <input type="password" name="password1" ng-model="password1" required id="password1" placeholder="密碼"> 
                <div ng-show="myForm.password1.$invalid && submitted"> 
                  <div style="color:red" ng-show="myForm.password1.$error.required">密碼是必須的</div> 
                </div> 
              </label> 
            </div> 
            <div class="item-input-inset"> 
              <label class="item-input-wrapper"> 
                <i class="icon ion-locked"></i> 
                <input type="password" name="password2" ng-model="password2" id="password2" required placeholder="確認(rèn)密碼"> 
                <div ng-show="myForm.password2.$invalid && submitted"> 
                  <div style="color:red" ng-show="myForm.password2.$error.required">確認(rèn)密碼是必須的</div> 
                </div> 
                <div ng-show="myForm.password2.$valid"> 
                  <div style="color:red" ng-show="password1!=password2">兩次密碼輸入不一致</div> 
                </div> 
              </label> 
            </div> 
          </div> 
          <div class="padding"> 
            <button class="button button-full button-dark" type="submit">注冊(cè)</button> 
          </div> 
    </form> 
  </div> 
   </ion-content> 
</ion-nav-view> 
 <script> 
   'use strict';   
 var myApp = angular.module('myApp',[]); 
myApp.controller('myCtrl',['$scope', '$http',function($scope, $http){ 
 // $scope.formModel = {}; 
 $scope.submitted = false; 
 $scope.onSubmit = function(){ 
  if ($scope.myForm.$valid) { 
    var param = { 
        User: $scope.user, 
        Pwd1: $scope.password1, 
        Pwd2:$scope.password2 
      } 
    $http.post('someurl',param) 
   .success(function(data){ 
    console.log(':)'); 
   }) 
   .error(function(data){ 
    console.log(':('); 
   }); 
  console.log(param); 
}else{ 
  $scope.submitted = true; 
} 
 } 
}]); 
  </script> 
</body> 
</html>

不填寫信息注冊(cè)就會(huì)出現(xiàn)下圖：

以上所述是小編給大家介紹的Ionic+AngularJS實(shí)現(xiàn)登錄和注冊(cè)帶驗(yàn)證功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: