首页 / ANGULAR / Ionic+AngularJS实现登录和注册带验证功能

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Ionic+AngularJS实现登录和注册带验证功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6362字，纯文字阅读大概需要10分钟。

内容图文

登录：

<!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实现登录和注册带验证功能全部内容，希望文章能够帮你解决Ionic+AngularJS实现登录和注册带验证功能所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/346242.html

来源：【匿名】

【上一篇】AngularJs表单校验功能实例代码【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【Ionic+AngularJS实现登录和注册带验证功能】教程文章相关的互联网学习教程文章

angular的仿百度搜索功能

尝试一下调用百度的搜索功能，这部分主要是练习$http。首先HTML部分：<div ng-app="myApp" ng-controller="Aaa"">　　<input type="text" ng-model="name" ng-keyup="change(name)" placeholder="请输入搜索内容">//内容的搜索框　　<input type="button" ng-click="change(name)" value="搜索"> // 搜索按钮　　<ul>　　　　<li ng-repeat="da in data">{{ da }}</li> //搜索到的内容　　</ul></div>HTML布局完成，现在设置一下...

带你走近AngularJS - 基本功能介绍【代码】【图】

带你走近AngularJS系列：带你走近AngularJS - 基本功能介绍带你走近AngularJS - 体验指令实例带你走近AngularJS - 创建自己定义指令------------------------------------------------------------------------------------------------AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好而且可扩展的服务，包括数据绑定、DOM操作、MVC设计模式和模块载入等。本文专注于AngularJS 指令的使用，在我们进入主题之...

Angular实现动态添加删除表单输入框功能【代码】【图】

1 <div class="form-group form-group-sm" *ngFor="let i of login"> 2 <label class="col-form-label">用户名</label> 3 <input class="form-control" [(ngModel)]="i.username" value="{{i.username}}"> 4 <label class="col-form-label">密码</label> 5 <input class="form-control" [(ngModel)]="i.password" value="{{i.password}}"> 6 <button class="btn btn-link" (click)="removeInput(i)">删除</but...

angularjs 实现猜数字大小的功能【代码】

1<body ng-app="myapp" ng-controller="myCtrl">2<h2>猜一猜，多大值？（1-1000）</h2>3 我猜是:<input type="text" ng-model="guess">4<button ng-click="check()">验证</button><button ng-click="reset()">再玩一次</button><br>5<span ng-if="fil>0">您猜的数大了</span>6<span ng-if="fil<0">您猜的数小了</span>7<span ng-if="fil==0">您猜对了</span>8<p>猜的次数<span>{{n}}</span></p>9</body> 1<script src="angular...

angularjs制作购物车功能【图】

尊重劳动成果，转载请注明出处（http://blog.csdn.net/sllailcp/article/details/47833315）...初学angularJS 闲暇之余做了个小案例。功能：计算购物车商品的价格，以及删除购物车商品。以下是完整案例（jQuery和angularjs需要自己引入）<!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .cursors{cursor:pointer} </style> <script src="js/jquery-1.11.1.js"></script...

Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能的代码案例【图】

这篇文章主要介绍了Angularjs bootstrap table多选（全选）支持单击行选中实现编辑、删除功能,需要的朋友可以参考下最终实现效果： index.html<!DOCTYPE html> <html><head><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angula...

AngularJS表单验证功能

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中，表单验证给出来的反馈同获得正确输入同等重要。表单验证不仅能给用户提供有用的反馈，同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏。我们要在Web前端尽力保护后端。AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用，并且非常方便。AngularJS提供了很多表单验证指令。 <form name="form" novalidate><label name...

实例详解Angular实现简单查询天气预报功能【图】

本文主要介绍了Angular实现的简单查询天气预报功能,涉及AngularJS针对第三方API接口交互的相关操作技巧,需要的朋友可以参考下，希望能帮助帮到大家。本文实例讲述了Angular实现的简单查询天气预报功能。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码如下：<!DOCTYPE html> <html> <head><meta charset="utf-8"><script src="angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="siteCtrl"> <p ...

angularjs的基本功能你知道多少？angularjs的功能使用的详细介绍【图】

本篇文章介绍了关于angularjs的基本的使用和基本的功能介绍都在这里，让你更清楚的了解angularjs的功能及其使用，现在我们一起来看这篇文章吧AngularJS的基本功能介绍AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好并且可扩展的服务，包括数据绑定、DOM操作、MVC设计模式和模块加载等。本文专注于AngularJS 指令的使用，在我们进入主题之前，我们将快速浏览AngularJS的基本用法。AngularJS 不仅仅是一个类...

AngularJS怎么搭建简单的项目？angularjs的功能实现（附完整实例）【图】

本篇文章主要的讲述了关于angularjs的搭建入门的项目。有兴趣的同学可以进来看看，实验很多代码大家可以试试看的。angularjs简介AngularJS 是一个 JavaScript 框架。AngularJS 通过指令扩展了 HTML.且通过表达式实现页面与js数据的双向绑定。主体采用开发人员非常熟识的MVC（model、view、controller）模式,采用路由（route）模式实现单页面跳转（Ps:AngularJS 模块的 config 函数用于配置路由规则）。AngularJS有着诸多特性，...

AngularJS怎么上传文件？angularjs上传功能的详细介绍

本篇文章主要讲述的是关于angularjs的上传文件的功能，angularjs的文件怎么上传你都知道吗？angularjs是前台页面，后台使用的是什么你知道吗，现在来看这篇文章吧使用AngularJS上传文件前台是Angular页面后台使用SpringBoot/SpirngMVC上传文件html<p><input id="fileUpload" type="file" /><button ng-click="uploadFile()">上传</button></p>js $scope.upload = function(){var form = new FormData(); var fil...

AngularJS文件上传的功能你了解的多少？几分钟就让你了解angularjs的文件上传【图】

本篇文章主要的讲述了angularjs的文件上传功能，大家又不懂都可以来看，希望能帮助到大家。下面就让我们一起来看这篇文章吧问题描述附件上传检定结果以附件形式上传。这里先不考虑api。实现的任务就是，点击选择文件，选择之后可以清楚掉该文件。插件介绍用到了项目映入过的一个插件，angular-file-upload。插件很简单，就是一个指令，我们在它提供给我们的指令中声明一个uploader对象，这个对象表示在不同的时间下要执行什么操作，...

AngularHMR(热模块替换)功能的实现方法

本篇文章主要介绍了Angular HMR(热模块替换)功能实现方法，内容挺不错的，现在分享给大家，也给大家做个参考。最近一个同事在使用Angular的时候，希望能像VUE那样，修改代码后浏览器不刷新，页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。稍微研究了一下，发现在angular/cli创建的项目中，实现这个不算太难，步骤如下：1、首先创建一个src/environments/environment.hmr.ts文件，内容如下export c...

angular2和nodejs实现图片上传的的的功能

这篇文章主要介绍了angular2+nodejs实现图片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下在使用angular2进行图片上传的时候，遇到了各种各样的问题。在多番尝试之后最终成功上传图片，下面将我的方法分享给大家：nodejs 后台代码var express = require("express"); //网络请求模块 var request = require("request"); //引入nodejs文件系统模块 const fs = require(fs); //引入body-parser //包含在请求正文中提交...

详细解读Angular5.1新功能

这篇文章主要介绍了Angular5.1新功能以及相关的用法，需要的朋友参考学习下吧。本篇文章通过介绍Angular5.1新特性给大家详细分享了的5.1改进和增加的内容，以下是全部内容：新特性Angular Material和CDK稳定版CLI中支持Service Worker在CLI中改进了Universal和AppShell的支持改进了装饰器的错误信息支持TypeScript2.5有关功能和bug修复的完整列表，请参阅Angular，Material和CLI的更新日志。Angular Material和CDK稳定版在发布了11...

首页 / ANGULAR / Ionic+AngularJS实现登录和注册带验证功能

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【Ionic+AngularJS实现登录和注册带验证功能】教程文章相关的互联网学习教程文章

IONIC - 相关标签

功能 - 相关标签

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程