首页
所有分类
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 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
vue实现购物车选择功能
Jan 10 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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
kafka(2) 曝光融合(1) 高动态范围(1) pycryto(1) axios(1) HDR(1) 连接器(1) Vue3(1) 数据加密(1) shell脚本(1)
You might like
php语言流程控制中的主动与被动
2012/11/05 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
python装饰器使用方法实例
2013/11/21 Python
使用python实现扫描端口示例
2014/03/29 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
PyQt5实现简易电子词典
2019/06/25 Python
python字符串查找函数的用法详解
2019/07/08 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
MVMT手表官方网站：时尚又实惠的高品质手表
2016/12/04 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
中软国际Java程序员机试题
2012/08/19 面试题
三年大学生活自我鉴定
2014/01/21 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
担保书格式
2015/01/20 职场文书
颐和园导游词
2015/01/30 职场文书
护士年终工作总结不会写？各科护士模板总结
2020/01/02 职场文书