微信小程序经营_Ionic+AngularJS完成登录和注册带验

日期:2021-01-12 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

Ionic+AngularJS实现登录和注册带验证功能       这篇文章主要介绍了Ionic+AngularJS实现登录和注册带验证功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
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), ment 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 div 用户登录 /div /div div form ng-submit="onSubmit(myForm.$valid)" name="myForm" novalidate div div label i /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 label i /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 button 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), ment 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 
 div 用户注册 /div 
 /div 
 div 
 form ng-submit="onSubmit(myForm.$valid)" name="myForm" novalidate 
 div 
 div 
 label 
 i /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 
 label 
 i /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 
 label 
 i /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 
 button 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实现登录和注册带验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!