首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Ionic+AngularJS实现登录和注册带验证功能

Posted in Javascript onFebruary 09, 2017

登录：

<!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>

不填写信息登录就会如图所示：

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

Ionic+AngularJS实现登录和注册带验证功能

- Author -

Eveweiscsdn

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
Boostrap入门准备之border box
May 09 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
浅析BootStrap中Modal（模态框）使用心得
Dec 24 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
javascript常用的设计模式
Feb 09 #Javascript
简单实现js选项卡切换效果
Feb 09 #Javascript
原生JS轮播图插件
Feb 09 #Javascript
jQuery页面弹出框实现文件上传
Feb 09 #Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 #Javascript
详解angular2采用自定义指令（Directive）方式加载jquery插件
Feb 09 #Javascript
vue-router跳转页面的方法
Feb 09 #Javascript
Stater(1) appdata(1) XPathParser(1) sentinel(1) minio(1) protocol(1) Windows server 2003(1) mysqldump(1) sock(2) ACID(1)
You might like
php图片处理：加水印、缩略图的实现（自定义函数：watermark、thumbnail）
2010/12/02 PHP
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
一个JS翻页效果
2007/07/23 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
javascript连续赋值问题
2015/07/08 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
python抽象基类用法实例分析
2015/06/04 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python如何使用input函数获取输入
2020/08/06 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Spy++的使用方法及下载教程
2021/01/29 Python
美国汽配连锁巨头Pep Boys官网：轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
店长岗位职责
2013/11/21 职场文书
幼儿教师考核制度
2014/01/25 职场文书
个人自我评价范文
2014/02/05 职场文书
药品促销活动方案
2014/02/14 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
MySQL优化及索引解析
2022/03/17 MySQL
python套接字socket通信
2022/04/01 Python