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

最新推荐文章于 2021-04-10 14:33:36 发布

转载最新推荐文章于 2021-04-10 14:33:36 发布 · 807 阅读

文章标签：

#angularjs中httplocati

angularjs 专栏收录该内容

2 篇文章

订阅专栏

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

使用$http、$location、$watch及双向数据绑定等实现简单的用户登陆验证，记录备忘：

1、$http模拟从后台获取json格式的数据；

2、$watch实时监控数据变化；

3、$location.path实现页面跳转；

4、$scope实现数据绑定，包括input内容及文字样式等

app.js代码

[javascript]view plaincopy 
    
 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代码：

[html]view plaincopy 
    
 <!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.youkuaiyun.com/tuzongxun">优快云</a>  
    
 <hr/>  
 &copy;版权所有：aaaa  
 <p>  
     联系我：  
     <a href="mailto:tuzongxun123@163.com">tuzongxun123@163.com</a>  
 </p>  
 </center>  
 </div>  
 </body>  
 </html>  

[html]view plaincopy 
    
 <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代码：

[html]view plaincopy 
    
 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数据：

[html]view plaincopy 
    
 {  
     "result":true,  
     "message":"密码有误"  
 }  

[css]view plaincopy 
    
 /* 
 公共样式控制 
  */  
 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;  
 }  