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的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...
随机推荐
- 225. Implement Stack using Queues
代码如下: class MyStack { // Push element x onto stack. Queue<Integer> queue=new ArrayDeque<> ...
- C++ Primer : 第十一章 : 关联容器之概述、有序关联容器关键字要求和pair类型
标准库定义了两种主要的关联容器:map和set map中的元素时一些关键字-值(key-value)对,关键字起到索引的作用,值则表示与索引相关的数据.set中每个元素只包含一个关键字,可以完成高效的 ...
- spring mvc 重定向传参
参考链接如下: http://bbs.csdn.net/topics/391034118?page=1 自己的示例程序: 详细页面提交一个修改动作,修改完成后跳转到检索页面,把检索条件重新赋值给检索页 ...
- 20145220《Java程序设计》实验一实验报告
*实验一 Java开发环境的熟悉 实验内容及步骤 使用JDK编译.运行简单的Java程序 命令行下程序开发: 在命令行下建立实验目录,进入该目录后创建exp1目录 敲入以下代码: package ex ...
- 黑马程序员——JAVA基础之多态与Object
------- android培训.java培训.期待与您交流! ---------- 多态 : 多态定义: 某一类事物的多种存在形态. 多态的体现: 父类的引用指向了自己的子类对象. ...
- 简单播放系统提示音 android
//Uri alert = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_ALARM); //alert = RingtoneManager.g ...
- 《Python自然语言处理》中文版-纠错【更新中。。。】
最近在看<Python自然语言处理>中文版这本书,可能由于是从py2.x到py3.x,加上nltk的更新的原因,或者作者的一些笔误,在书中很多代码都运行不能通过,下面我就整理一下一点有问题 ...
- 怎么用EDIUS实现跟踪马赛克效果
我们经常会在一些新闻的视频中看到一些马赛克,这些马赛克一般都是保护人物的隐私权,肖像权什么的.我们时常也会看到即使人物位置发生了变化,被遮挡的地方依旧还是被遮挡住,一点也不用担心因为人物运动而使马赛克 ...
- div圆角和颜色渐变的设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- codevs-1447取出整数的一部分
说实在的,这个题目真不想写了…… 1447 取出整数的一部分 题目描述 Description 假如有一个整数(int):145678,现在我做截取该数一部份的操作,如输入4,返回前4位即1456;如 ...