溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
登錄：
<!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>
不填寫信息登錄就會(huì)如圖所示：
注冊(cè)：
<!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">用戶注冊(cè)</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="確認(rèn)密碼">
<div ng-show="myForm.password2.$invalid && submitted">
<div ng-show="myForm.password2.$error.required">確認(rèn)密碼是必須的</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">注冊(cè)</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>
不填寫信息注冊(cè)就會(huì)出現(xiàn)下圖：
以上所述是小編給大家介紹的Ionic+AngularJS實(shí)現(xiàn)登錄和注冊(cè)帶驗(yàn)證功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼