<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="https://www.jb51.net/manifest.json" > <!-- 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="https://www.jb51.net/lib/ionic/css/ionic.css"> <link href="https://www.jb51.net/css/style.css"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="https://www.jb51.net/css/ionic.app.css"> --> <!-- ionic/angularjs js --> <script src="https://www.jb51.net/lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="https://www.jb51.net/cordova.js"></script> <!-- your app's js --> <script src="https://www.jb51.net/js/app.js"></script> <script src="https://www.jb51.net/js/Login.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <ion-pane> <ion-content> <div> <div>用户登录</div> </div> <div> <form ng-submit="onSubmit(myForm.$valid)" novalidate> <div> <div> <label> <i></i> <input type="text" ng-model="user" placeholder="用户名" required> <div ng-show="myForm.user.$invalid && submitted"> <div ng-show="myForm.user.$error.required">用户名是必须的</div> </div> </label> </div> <div> <label> <i></i> <input type="password" ng-model="password" placeholder="密码" required> <div ng-show="myForm.password.$invalid && submitted"> <div ng-show="myForm.password.$error.required">密码是必须的</div> </div> </label> </div> </div> <div> <button 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 content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="https://www.jb51.net/lib/ionic/css/ionic.min.css"> <link href="https://www.jb51.net/css/style.css"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="https://www.jb51.net/css/ionic.app.css"> --> <!-- ionic/angularjs js --> <script src="https://www.jb51.net/lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="https://www.jb51.net/cordova.js"></script> <!-- your app's js --> <script src="https://www.jb51.net/js/app.js"></script> <script src="https://www.jb51.net/js/Register.js"></script> <!-- <script src="https://www.jb51.net/js/controllers.js"></script> <script src="https://www.jb51.net/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> <div>用户注册</div> </div> <div> <form ng-submit="onSubmit(myForm.$valid)" novalidate> <div> <div> <label> <i></i> <input type="text" ng-model="user" placeholder="用户名" required> <div ng-show="myForm.user.$invalid && submitted"> <div ng-show="myForm.user.$error.required">用户名是必须的</div> </div> </label> </div> <div> <label> <i></i> <input type="password" ng-model="password1" required placeholder="密码"> <div ng-show="myForm.password1.$invalid && submitted"> <div ng-show="myForm.password1.$error.required">密码是必须的</div> </div> </label> </div> <div> <label> <i></i> <input type="password" ng-model="password2" required placeholder="确认密码"> <div ng-show="myForm.password2.$invalid && submitted"> <div ng-show="myForm.password2.$error.required">确认密码是必须的</div> </div> <div ng-show="myForm.password2.$valid"> <div ng-show="password1!=password2">两次密码输入不一致</div> </div> </label> </div> </div> <div> <button 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>
不填写信息注册就会出现下图：
