首页
所有分类
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 相关文章推荐
javascript 清空form表单中某种元素的值
Dec 26 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
tab栏切换原理
Mar 22 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
vue实现登录功能
Dec 31 Vue.js
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
Apache(17) element-china-area-data(1) SpringBoot(22) 数据重复(1) uniapp(4) Flutter(2) Navigator(1) capture(1) self(1) tabBar(1)
You might like
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Laravel访问出错提示：`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
用 JSON 处理缓存
2007/04/27 Javascript
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
详解vue中axios的使用与封装
2019/03/20 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
numpy中的delete删除数组整行和整列的实例
2018/05/09 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
python程序如何进行保存
2020/07/03 Python
JACK & JONES英国官方网站：欧洲领先的男装生产商
2017/09/27 全球购物
美国名牌香水折扣网站：Hottperfume
2021/02/10 全球购物
几个判断型的面试题
2012/07/03 面试题
电大物流学生的自我评价
2013/10/25 职场文书
车间主管岗位职责
2013/11/14 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
土地转让协议书
2014/04/15 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL