首页
所有分类
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 Panel常用方法
Oct 07 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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
SandBox(1) Git(3) cudn(1) webpack(1) calc(1) RTX 3050 ti(1) K8s(1) cudnn(1) swing(1) OpenFeign(1)
You might like
4.与数据库的连接
2006/10/09 PHP
PHP新手上路（十）
2006/10/09 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
PHP封装的简单连接MongoDB类示例
2019/02/13 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
剖析Python的Twisted框架的核心特性
2016/05/25 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
Python中GIL的使用详解
2018/10/03 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python argparse模块应用实例解析
2019/11/15 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
python自动化办公操作PPT的实现
2021/02/05 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
详解如何通过H5（浏览器/WebView/其他）唤起本地app
2017/12/11 HTML / CSS
微软瑞士官方网站：Microsoft瑞士
2018/04/20 全球购物
SIDESTEP荷兰：在线购买鞋子
2019/11/18 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
社会实践心得体会
2014/01/03 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
购房协议书范本
2014/04/11 职场文书
中职招生先进个人材料
2014/08/31 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
文明医院的标语集锦！
2019/07/24 职场文书