溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
登錄：
<!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="h2 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 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 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="h2 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 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 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 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 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實現登錄和注冊帶驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
