angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证
使用$http、$location、$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘:
1、$http模拟从后台获取json格式的数据;
2、$watch实时监控数据变化;
3、$location.path实现页面跳转;
4、$scope实现数据绑定,包括input内容及文字样式等
app.js代码
var app=angular.module('contactsApp',['ui.router']); app.config(function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise('/login'); $stateProvider.state('login', { url: "/login", views: { 'view': { templateUrl: 'views/login.html', controller: 'loginCtr' } } }); });
首页contacts.html代码:
<!DOCTYPE html> <html ng-app="contactsApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./angular-1.4.0-rc.2/angular.js"></script> <link rel="stylesheet" href="./css/login.css"/> <script src='./angular-1.4.0-rc.2/angular-ui-router.js'></script> <script src='./scripts/app.js'></script> <script src="./scripts/controllers/loginCtr.js"></script> <script src="./scripts/controllers/blogCtr.js"></script> </head> <body> <center> <!--顶部标题--> <div id="naDiv"> My ContactsSystem </div> </br> </center> <!--使用ui-rourer控制页面之间的切换--> <div ui-view="view"></div> <center> <!--页面底部固定内容--> <div id="footDiv"> <hr/> 链接: <a href="http://www.baidu.com">百度</a> <a href="http://www.sina.com.cn">新浪</a> <a href="http://blog.csdn.net/tuzongxun">CSDN</a> <hr/> ©版权所有:aaaa <p> 联系我: <a href="mailto:tuzongxun123@163.com">tuzongxun123@163.com</a> </p> </center> </div> </body> </html>
login.html代码:
<center> <div id="logdiv1"> userName:<input type="text" ng-model="user.userName"/><p class="p1" id="{{isUserId}}">{{isUserName}}</p> </br> </br> password:<input id="logPwd" type="password" ng-model="user.userPwd"/><p class="p1" id="{{isPwdId}}">{{isPwd}}</p> </br> </br> <input class="bonInput" type="button" value="login" ng-click="Login(user);" ng-disabled="login"> <input class="bonInput" type="button" value="regist"> </div> </center>
loginCtr.js代码:
angular.module('contactsApp') .controller('loginCtr', ['$scope','$http','$location', function($scope,$http,$location){ //模拟后台用户名和密码数据 var userNames=['aaa','bbb','ccc']; var userPwd='123'; //用户名和密码初始提示文字 $scope.isUserName='请输入用户名'; $scope.isPwd='请输入密码'; //是否启用登陆按钮 var isLogin1=false; var isLogin2=false; $scope.login=true; //用户验证,随输入实时提醒,这里只判断用户名是否存在和空值,还可以验证输入字符的长度、格式等 $scope.existUser=function(){ for(var i=0;i<userNames.length;i++){ if($scope.user!=null&&$scope.user.userName!=''&&userNames[i]==$scope.user.userName){ isLogin1=true; $scope.isUserName='用户名存在'; //用户名存在时,通过更改id,更改提示文字的颜色为绿色 $scope.isUserId="p2"; break; }else if($scope.user==null||$scope.user.userName==''){ isLogin1=false; $scope.isUserName='请输入用户名'; $scope.isUserId="p1"; //document.getElementById('p1').style.color='green'; }else{ isLogin1=false; $scope.isUserName='用户名不存在'; $scope.isUserId="p1"; //document.getElementById('p1').style.color='green'; } } } //legal:合法,判断密码输入是否合法,这里只判断长度,还可以正则表达式匹配,限定数字和字母 $scope.legalPwd=function(){ if($scope.user!=null&&$scope.user.userPwd!=null&&$scope.user.userPwd.length>=6&&$scope.user.userPwd.length<=15){ isLogin2=true; //密码格式正确时,修改id,使提示文字颜色变绿 $scope.isPwdId="p4"; $scope.isPwd="密码格式正确"; }else{ isLogin2=false; $scope.isPwdId="p3"; $scope.isPwd="密码格式不正确"; } } //调用用户验证和密码验证方法,判断登陆按钮是否可用 $scope.isLogin=function(){ $scope.existUser(); $scope.legalPwd(); if(isLogin1&&isLogin2){ //当用户名存在,并且密码格式正确的时候,启用登陆按钮 $scope.login=false; }else{ $scope.login=true; } } //登陆跳转,传数据到后台判断用户名和密码是否匹配,模拟http请求 $scope.Login=function(user){ //模拟http请求,从后台返回数据 $http.get("./json/user.json",user).success(function(checkLogin){ console.log(checkLogin); if(checkLogin==null){ //后台没有返回数据,跳转到错误页面 }else if(checkLogin.result==true){ //登陆成功,页面跳转到登陆后的页面 $location.path("/blogList"); }else{ //登陆失败,更改密码提示为密码错误,并清空密码 $scope.isPwd=checkLogin.message; $scope.isPwdId="p3"; document.getElementById("logPwd").value=""; } }); } //$watch方法可以实时监控一个对象的变化,当传入的对象,如user有任何变化时,就会执行里边的function $scope.$watch('user', function() { $scope.isLogin(); }, true); }])
user.json数据:
{ "result":true, "message":"密码有误" }
login.css代码:
/* 公共样式控制 */ body{ background:#E8E5E5; margin:0; } hr{ width:100%; } /* 登陆页面样式控制 */ #logdiv1{ width:50%; height: 250px; background-color: #C2BEBE; font-size: 32px; padding-top: 40px; margin: 72px; } #logdiv1 input{ font-size: 20px; } #logdiv1 .p1{ font-size: 16px; display:inline; color: red; margin-left: 10px; } #logdiv1 #p1{ color: red; } #logdiv1 #p2{ color: green; } #logdiv1 #p3{ color: red; } #logdiv1 #p4{ color: green; } /* 导航栏样式控制 */ #naDiv{ font-size: 42px; width: 100%; height: 50px; background-color: #181717; color: red; font-family: 黑体; } /* 底部固定div样式控制 */ #footDiv{ background-color: #181717; width:100%; height:125px; font-size: 18px; margin: 0px; color: #71EAF0; } .bonInput{ font-size: 28px; }
效果图:
angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证的更多相关文章
- angularJs初体验,实现双向数据绑定!使用体会:比较爽
使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...
- JavaScript实现简单的双向数据绑定
什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...
- 《AngularJS权威教程》中关于指令双向数据绑定的理解
在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
- angularJs:双向数据绑定
示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...
- Vue、AngularJS 双向数据绑定解剖
数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...
- AngularJS双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- AngularJS之双向数据绑定,class绑定
之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...
- angularjs探秘<四> 双向数据绑定
双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...
随机推荐
- SAP 增强说明
转自http://blog.csdn.net/lyb_yt/article/details/8177974 (一)什么是增强(Enhancement)? 简单地说,增强就是ERP系统中标准程序的出口, ...
- c 深度剖析 6
函数的编码风格 1.注释 2,空行 3,缩进 4,参数长度,代码长度,语句长度要合适. 5,少用全局变量 6,指针仅作输入参数时,可用const 设置其为只读属性,避免其在函数中被修改. 7,函数默认 ...
- C#部分---语言经典题目——兔子生兔子
根据本月成兔=上月成兔+上月小兔:本月小兔=上月幼兔:本月幼兔=本月成兔 利用while循环: Console.WriteLine("请输入月份:"); //int m = int ...
- UVa 400
一开始没怎么看懂题目,原来就是M字符就是这一列的宽度为M个字符,包括空格. #include<iostream> #include<algorithm> #include< ...
- 远程升级openSSH
1.确认安装了telnet服务,并且telnet服务能正常运行 查询是否安装了telnet服务:rpm -qa telnet 如果显示出 类似于telnet-server-0.17-31.EL4.5这 ...
- dedecms 忘记后台密码
找到admin表 dede_admin,把其pwd的值修改为 默认的 字符串:f297a57a5a743894a0e4, 之后,你的密码就被充值为 admin
- 关于Lua程序设计{读书笔记}
1.lua中的标识符可以是由任意字母.数字和下划线构成的字符串,但不能以数字开头.2.lua将通常类似"_VALUE"的标识符作为保留标识符3.lua的保留字 and break ...
- CentOS提示::unknown filesystem type 'ntfs'.解决
在将硬盘插到Linux系统上,打开硬盘时一直提示:unknown filesystem type 'ntfs'.在尝试网上的方法也遇到了一些问题. 下面按照遇到的问题,按照正确的方式注意操作从而避免问 ...
- ADC 分辨率和精度的区别
分辨率和精度这两个,经常拿在一起说,才接触的时候经常混为一谈.对于ADC来说,这两样也是非常重要的参数,往往也决定了芯片价格,显然,我们都清楚同一个系列,16位AD一般比12位AD价格贵,但是同样是1 ...
- ibm硬件知识点
ibm http://www-03.ibm.com/systems/storage/disk/storwize_v3700/index.html Current software level: Ver ...