首页
所有分类
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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
深入理解(function(){... })();
Aug 16 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
详解javascript replace高级用法
Feb 17 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
vue路由的配置和页面切换详解
Sep 09 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
封装(1) promise(2) PyAutoGUI(1) 构造函数(1) variables(1) gRPC(3) 继承(1) 验证表达式(1) 百度地图(1) XDM(3)
You might like
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
php数组添加元素方法小结
2014/12/20 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
javascript实现yield的方法
2013/11/06 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
ajax的分页查询示例（不刷新页面）
2017/01/11 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
keras K.function获取某层的输出操作
2020/06/29 Python
详解python metaclass（元类）
2020/08/13 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
印度尼西亚最大和最全面的网络商城：Blibli.com
2017/10/04 全球购物
会计员岗位职责
2014/03/15 职场文书
婚假请假条怎么写
2014/04/10 职场文书
离婚协议书范文
2015/01/26 职场文书
导游欢送词
2015/01/31 职场文书
企业工会工作总结2015
2015/05/13 职场文书
教师节老师寄语
2015/05/28 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
委托开发合同书（标准版）
2019/08/07 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Python加密技术之RSA加密解密的实现
2022/04/08 Python
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python