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 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>
不填写信息登录就会如图所示：
注册：
<!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实现登录和注册带验证功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
JSP+MySQL实现网站的登录与注册小案例
为了练手,我就自己试着做了一个网站的登录与注册的小案例.由于没有做美化处理,所以界面并不是很好看. 网站实现的功能如下: •用户首次注册功能 •用户登录功能 下面我将会分模块展示 注册模块 首先需要一个注册界面,如下register.jsp: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOC
-
jsp基于XML实现用户登录与注册的实例解析（附源码）
简单的基于xml做数据库的登录与注册 主题介绍: 1.xml的读取和存储,主要是用到dom4j技术,(网络中的文件存储路径采用classLoader) 文件的读取和存储,写了一个工厂类 public class DocumentFactory { private static Document dom=null;//需要共享一个dom,所以需要设置为static private static String name="user.xml"; private static String f
-
JSP实现用户登录、注册和退出功能
本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计 本例使用oracle数据库 创建用户表 包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp
-
在jsp中用bean和servlet联合实现用户注册、登录
声明:作者原创,版权所有.未经授权,不得转载 在jsp中用bean和servlet联合实现用户注册.登录 作者:imagebear版权:imagebear 本例需要的软件和运行环境:1.Windows2000 Server操作系统2.jdk1.43.JCreator2.5(java源码编辑调试器,吐血推荐!)4.Macromedia JRun MX5.Macromedia Dreamweaver MX(非必需)6.MySQL数据库(最好安装MySQL Control Center) 一.数据库设
-
node.js实现登录注册页面
本文实例为大家分享了node.js登录注册页面展示的具体代码,供大家参考,具体内容如下 首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <
-
原生js验证简洁注册登录页面
序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css
-
Servlet+JavaBean+JSP打造Java Web注册与登录功能
采用Java Web所实现的MVC结构图如下,其中控制器部分采用Servlet来实现,模型部分采用JavaBean来实现,而大部分的视图采用Jsp页面来实现. 思想基础 JSP+JavaBean两层结构工作原理应该是比较熟悉的,也比较好理解. 但是有一点必须要清楚就是用户通过浏览器来发送网页的请求,此请求到达服务器后在服务器端查找对应的网页,如果是首次请求(第二次就不用解释执行了),对于JSP来说要生成Servlet,然后通过Servlet引擎来执行 Servlet,把调用JavaBean的结果
-
js实现登录与注册界面
完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> <script type="
-
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JS
-
js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查看效果 源码下载----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码. 为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效