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

2019-11-19 17:39:27

字体：大中小

来源：转载

供稿：网友

登录：

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

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