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

以上是 Ionic+AngularJS实现登录和注册带验证功能 的全部内容, 来源链接: utcz.com/z/342663.html

回到顶部