Ionic+AngularJS實現登錄和注冊帶驗證功能
更新時間：2017年02月09日 17:09:54 作者：Eveweiscsdn
這篇文章主要介紹了Ionic+AngularJS實現登錄和注冊帶驗證功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
登錄：
<!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實現登錄和注冊帶驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
AngularJs Managing Service Dependencies詳解
本站主要介紹AngularJs Managing Service Dependencies的知識資料，這里整理相關知識，及簡單示例代碼，有興趣的小伙伴可以參考下2016-09-09
本文介紹AngularJS ng-click 指令,這里整理了ng-click指令的基礎知識并且附有簡單示例代碼和實現效果圖,有需要的小伙伴參考下2016-08-08
這篇文章主要介紹了使用AngularJS實現可伸縮的頁面切換的方法,AngularJS是一款熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
上拉加載，是目前手機網站加載數據的一種常用方式，本文主要講解AnglarJs集成，上拉加載功能。感興趣的朋友跟隨腳本之家小編一起學習吧2018-02-02
這篇文章主要介紹了使用Angular CLI進行單元測試和E2E測試的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了angularJS提交表單（form）的方法和示例,需要的朋友可以參考下2015-02-02
AngularJS中ngAnimate模塊支持動畫效果，但是ngAnimate模塊并未包含在AngularJS核心庫中，因此需要使用ngAnimate需要在定義Module時聲明對其的引用。下面通過本文我們來看看AngularJS動畫的詳細介紹。2016-07-07
AngularJS開發(fā)教程之控制器之間的通信方法分析
這篇文章主要介紹了AngularJS開發(fā)教程之控制器之間的通信方法,結合實例形式較為詳細的分析了AngularJS控制器之間通信的三種常用方式及相關使用技巧,需要的朋友可以參考下2016-12-12
angular 當需要form表單需要驗證時，angular自帶了許多校驗器，但是很多時候自帶的無法滿足業(yè)務需求，這時候就需要自定義的校驗器，下面通過本文給大家分享Angular2 自定義validators的實現方法，需要的朋友參考下吧2017-07-07
本文主要介紹AngularJS ng-srcset 指令,這里對ng-srcset 指令做了詳細的資料整理，附有代碼示例，有需要的小伙伴可以參考下2016-08-08