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

来源：互联网发布：北大青鸟软件学校编辑：程序博客网时间：2024/06/03 11:21

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

效果图：

1 0