Ionic+AngularJS实现登录和注册带验证功能

登录：

<!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> 

不填写信息登录就会如图所示：

注册：

<!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">用户注册</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="确认密码">
                <div ng-show="myForm.password2.$invalid && submitted">
                  <div style="color:red" ng-show="myForm.password2.$error.required">确认密码是必须的</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">注册</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> 

不填写信息注册就会出现下图：

以上所述是小编给大家介绍的Ionic+AngularJS实现登录和注册带验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！