AugularJS从入门到实践（三）
前 言
前端
AngularJS是为了克服HTML在构建应用上的不足而设计的。（引用百度百科）
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。（引用百度百科）例如：使用双大括号{{}}语法进行数据绑定；使用DOM控制结构来实现迭代或者隐藏DOM片段；支持表单和表单的验证；能将逻辑代码关联到相关的DOM元素上；能将HTML分组成可重用的组件。本篇学习主要有两个部分：
【AngularJS 输入认证】
| 1、
AngularJS 输入认证 |
[AngularJS中的表单验证]
1、表单中，常用的验证操作：
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2、验证时，需给表单，及需要验证的input，设置name属性：
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中。故，可以使用 formName.inputName.$验证操作 得到验证结果：
例如：formName.inputName.$dirty = "true" 表单被填写过
formName.inputName.$invalid = "true" 表单输入不合法
formName.inputName.$error.required = "true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/date/url等。。。
3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。如果只想使用AngularJS验证，可以使用<form novalidate></form>属性，禁用H5自带验证功能；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> <link rel="stylesheet" type="text/css" href="libs/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
</head>
<!--↑插入css样式-->
<body ng-app="login" ng-controller="login" class="row container-fluid">
<!--↑设置angular指令，控制器指令，bootstrap样式占满全屏-->
<section class="col-sm-8 col-md-3 col-xs-10" >
<!--↑响应式样式-->
<div id="wai">
<!--↑白底的id-->
<div class="header">Login to your accout</div>
<!--↑头部标题-->
<form action="" method="post" name="myForm" novalidate>
<!--↑form表单-->
<div class="name">
<!--↑用户行设置-->
<span class="iconfont icon-name"></span>
<!--↑字体样式-->
<input type="text" name="name" id="name" value="" placeholder="Username" ng-model="name"/>
<!--↑输入框设置-->
</div>
<span class="ts1" ng-show="myForm.name.$pristine||name==''">请输入账户</span>
<!--↑判断输入框内容没有被填写时或者输入内容为空时出现字体-->
<div class="pwd">
<!--↑密码行设置-->
<span class="iconfont icon-denglu-suotou"></span>
<!--↑输入框设置-->
<input type="password" name="pwd" id="pwd" value="" placeholder="password" ng-model="pwd"/>
<!--↑判断输入框内容没有被填写时或者输入内容为空时出现字体-->
</div>
<span class="ts2" ng-show="myForm.pwd.$pristine||pwd==''">请输入密码</span>
<div class="yz">
<div class="yz-1">
<input type="text" name="yz" id="code_input" ng-model="yz" placeholder="请输入验证码"/>
</div>
<div id="container"></div> </div> <div class="foot">
<div class="zi"><span class="zi1">忘记密码</span>丨<span class="zi2" ng-click="login2()" >立即注册</span></div>
<button id="my_button" type="button" value="登录" ng-click="login()" >Login</button>
</div>
</form> </div>
</section> </body>
<script src="js/gVerify.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var verifyCode = new GVerify("container");
angular.module("login",[])
.controller("login",function($scope){
$scope.login = function(){
//↓验证码判断
var res = verifyCode.validate(document.getElementById("code_input").value)
if(res){
//↓当验证码正确时判断下方
if($scope.name == "111" && $scope.pwd == "111"){
window.location = "index3.html?name="+$scope.name;
}else{
alert("密码错误，登录失败！！")
}
}else{alert("验证码输入错误.")}
};
$scope.login2 = function(){
/*angular中的自定义方法，ng-click="login2()"调用该方法实现跳转页面*/
window.location="index2.html"
}
}) </script>
</html>
【注册页代码如下】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> <link rel="stylesheet" type="text/css" href="libs/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/index2.css"/>
<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
</head>
<!--↑样式引入-->
<body ng-app="login" ng-controller="login">
<!--↑设置angular指令，控制器指令，bootstrap样式占满全屏-->
<section>
<span class="iconfont icon-guanbi" ng-click="login1()"></span>
<!--↑字体样式右上方关闭按钮-->
<form action="" method="post" name="myForm" novalidate>
<!--↑form表单样式 加入novalidate 看上方文字解释-->
<div id="wai">
<!--↑定义白色底部样式-->
<div class="header">欢迎注册账号</div>
<div class="name">
<!--↑账户行样式-->
<span class="iconfont icon-name"></span>
<!--↑文字样式-->
<input type="text" name="name" id="name" value="" placeholder="账户" ng-model="user.name"/>
<!--↑定义angular输入框ng-model-->
</div>
<!--↓判断，当账户行未填写或者内容为空的时候显示-->
<span class="ts1" ng-show="myForm.name.$pristine||user.name==''">请输入账户</span>
<div class="pwd">
<!--↑密码行样式-->
<span class="iconfont icon-denglu-suotou"></span>
<!--↑文字样式-->
<input type="password" name="pwd" id="pwd" value="" placeholder="密码" ng-model="user.pwd"/>
<!--↑定义angular输入框ng-model-->
</div>
<!--↓判断，当密码行未填写或者内容为空的时候显示-->
<span class="ts2" ng-show="myForm.pwd.$pristine||user.pwd==''">请输入密码</span>
<div class="repwd">
<!--↑确认密码行样式-->
<span class="iconfont icon-duihao"></span>
<!--↑文字样式-->
<input type="password" name="repwd" id="repwd" value="" placeholder="确认密码" ng-model="user.repwd"/>
<!--↑确认密码输入框-->
<br />
<span class="red ts3" ng-show="myForm.repwd.$dirty && user.pwd!=user.repwd">两次密码不相同</span>
<!--↑判断确认密码输入框和密码框内容不一致时显示。-->
</div>
<br /> <!--两个button按钮-->
<div class="foot">
<button id="my_button1" type="button" class="btn" value="注册" ng-disabled="myForm.$invalid || user.pwd!=user.repwd" ng-click="login1()">注册</button>
<button id="my_button2" type="button" class="btn" value="登录" ng-click="resets()" >重置</button>
</div>
</div> </form>
</section> </body> <script src="libs/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> angular.module("login",[])
.controller("login",function($scope){
//在scope内部添加一个对象
$scope.initUser = {
name:'',
pwd:'',
repwd:'',
}
//调用angular方法，ng-click="resets()"调用
$scope.resets = function(){
//copy出一个新对象，$scope.user地址指向新对象
$scope.user = angular.copy($scope.initUser);
}
//↓调用angular方法，ng-click="resets()"调用
$scope.login1 = function(){
//↓跳转新页面
window.location = "index.html"
}
})
</script>
</html>
学习时候的笔记，可能会有一些错误的地方，欢迎各位的批评指点。
反思，复盘，每天收获一点---------------------期待更好的自己
AugularJS从入门到实践（三）的更多相关文章
- AugularJS从入门到实践（一）
前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...
- AugularJS从入门到实践（二）
前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) 本篇学习主要有两个部分: ①[AngularJS 过滤器] ②[AngularJS ...
- Nginx从入门到实践(三)
动静分离 动静分离是将网站静态资源(JavaScript,CSS,img等文件)与后台应用分开部署,提高用户访问静态代码的速度,降低对后台应用访问. 动静分离的一种做法是将静态资源部署在nginx上, ...
- Docker入门教程（三）Dockerfile
Docker入门教程(三)Dockerfile [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第三篇,介绍了Dockerfile的语法,DockerOn ...
- 《Github入门与实践》读书笔记 蟲咋先生的追求之旅（上）
<Github入门与实践>作者: [日] 大塚弘记 译者:支鹏浩/刘斌 简介 本书从Git的基本知识和操作方法入手,详细介绍了GitHub的各种功能,GitHub与其他工具或服务的协作 ...
- Python编程从入门到实践笔记——类
Python编程从入门到实践笔记——类 #coding=gbk #Python编程从入门到实践笔记——类 #9.1创建和使用类 #1.创建Dog类 class Dog():#类名首字母大写 " ...
- Docker 从入门到实践（一）Docker 简介
读前须知:本教程大部分都是[Docker 从入门到实践 ]一书的知识,有兴趣可以直接观看书籍.同时,借鉴书籍的知识,如有侵权,请告知我,我会删除处理.谢谢. 一.什么是 Docker? Docker ...
- Python编程：从入门到实践（选记）
本文参考< Python 编程:从入门到实践>一书,作者: [ 美 ] Eric Matthes 第1章 起步 1.1 搭建python环境 在不同的操作系统中, Python 存 ...
- odoo：开源 ERP/CRM 入门与实践 -- 上海嘉冰信息技术公司提供咨询服务
odoo:开源 ERP/CRM 入门与实践 看了这张图,或许你对odoo有了一些兴趣. 这次Chat就是和大家一起交流开源ERP/CRM系统:odoo 对以下读者有帮助:研发.产品.项目.市场.服务. ...
随机推荐
- ReactJS入门基础
渲染这俩字可能在很多地方都见过.但可能不太理解是啥意思. 那么首先我们来理解一下渲染. 渲染 我觉得这样理解比较通俗. 我们做一个汽车,开始是没有喷漆的(没有css) 只是些框框架架(HTML标签). ...
- Java8部分新特性的学习
Java8中的新特性 一.Lambda表达式 Lambda表达式可以理解为一种可传递的匿名函数:它没有名称,但又参数列表.函数主体.返回类型,可能还有一个可以抛出的异常列表. 匿名:和匿名类类似的,它 ...
- debian安装dwm窗口管理器
我安装debian版本是debian-8.8.0-i386-netinst最小安装 首先去官网下载源代码 http://git.suckless.org/dwm #安装x-window环境 $sudo ...
- python3实现TCP协议的简单服务器和客户端
利用python3来实现TCP协议,和UDP类似.UDP应用于及时通信,而TCP协议用来传送文件.命令等操作,因为这些数据不允许丢失,否则会造成文件错误或命令混乱.下面代码就是模拟客户端通过命令行操作 ...
- Asp.Net生命周期的详解
一．Asp.Net页面生命周期的概念 当我们在浏览器地址栏中输入网址,回车查看页面时,这时会向服务器端IIS)发送一个request请求,服务器就会判断发送过来的请求页面,当完全识别 TTP页面处理程 ...
- 用GAN生成二维样本的小例子
同步自我的知乎专栏:https://zhuanlan.zhihu.com/p/27343585 本文完整代码地址:Generative Adversarial Networks (GANs) with ...
- memcached配置
首先是安装libevent库,执行如下的命令 tar vzxf libevent-2.0.21-stable.tar.gz cd libevent-2.0.21-stable ./configure ...
- javaScript高级程序设计笔记 1
核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM 延迟脚本 defer typeof操作符 判断字符类型 返回 undefined boolean s ...
- Socket实现
网络实现架构 4.4BSD通过同时对多种通信协议的支持来提供通用的底层基础服务.4.4BSD支持四种不同的通信协议簇: TCP/IP(互联网协议簇) XNS(Xerox网络系统) OSI协议 Unix ...
- Swift数组的存取与修改
对数组的存取与修改可以通过数组的方法和属性来进行,或者使用数组的下标语法. 要知道数组中元素的数量,可以查看它的只读属性count: println("The shopping list c ...