使用$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/>
&copy;版权所有：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及双向数据绑定学习实现简单登陆验证的更多相关文章

  1. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  2. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

  3. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  4. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  5. angularJs：双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  6. Vue、AngularJS 双向数据绑定解剖

    数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...

  7. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. AngularJS之双向数据绑定,class绑定

    之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...

  9. angularjs探秘<四> 双向数据绑定

    双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...

随机推荐

  1. ZMMR103-数据批量导入

    ************************************************************************ Title : ZMMR103 ** Applicat ...

  2. ZOJ 1178 Booklet Printing

    原题链接 题目大意:书本印刷都是用大开的纸张对折.比如一个册子一共4页,为了方便装订,外侧印刷1.4页,内侧印刷2.3页,这样对折之后就可以按照正常阅读习惯翻页了.此题目的就是给出书的总页数,要求计算 ...

  3. javabean实现serializable有什么用？为什么数据库持久就Bean实现这个接口？

    Java的"对象序列化"能让你将一个实现了Serializable接口的对象转换成一组byte,这样日后要用这个对象时候,你就能把这些byte数据恢复出来,并据此重新构建那个对象了 ...

  4. Codeforces Round #145 (Div. 2, ACM-ICPC Rules)

    A. Lefthanders and Righthanders \(i\)与\(i+\frac n2\)匹配,根据左右手调整位置. B. Reading 排序,取前\(k\)个. C. Weather ...

  5. Javascript对象属性与方法汇总

    Javascript对象属性与方法汇总 发布时间:2015-03-06 编辑:www.jquerycn.cn 详细介绍下,javascript对象属性与对象方法的相关知识,包括javascript字符 ...

  6. NOSQL Benchmarks

    www.planetcassandra.org/nosql-performance-benchmarks/ http://www.planetcassandra.org/nosql-performan ...

  7. 在js自定义函数中使用$(event.target)代替$(this)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. LINQ to SQL 系列 如何使用LINQ to SQL插入、修改、删除数据

    http://www.cnblogs.com/yukaizhao/archive/2010/05/13/linq_to_sql_1.html LINQ和 LINQ to SQL 都已经不是一个新事物了 ...

  9. Uncaught TypeError: Illegal constructor(…)

    使用jquery  $(Document);会报这个错误.因为 Document(大写) 是函数. document(小写) 才是文档.

  10. 关于a标签的target属性

    超级链接a的target属性已经是不被新规范支持了,其值有四个保留字: 1._blank      <a href="document.html" target=" ...