Ionic+AngularJS实现登录和注册带验证功能
程序员文章站
2022-06-17 17:04:21
登录：
登录：
<!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实现登录和注册带验证功能，希望对大家有所帮助
上一篇： 蔬菜比水果好吗？PK一下如何？
下一篇： 学习ExtJS form布局