angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证

2022-07-24 09:30:38

使用$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>

<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":"密码有误"
}

/*
公共样式控制
 */
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;
}

效果图：

码农公寓

相关文章