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

时间：2021-05-28

登录：

<!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实现登录和注册带验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章