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 对以下读者有帮助:研发.产品.项目.市场.服务. ...
随机推荐
- javaCV开发详解之3：收流器实现，录制流媒体服务器的rtsp/rtmp视频文件(基于javaCV-FFMPEG)
javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...
- 10.并发包阻塞队列之ArrayBlockingQueue
上一节中对并发包中的非阻塞队列ConcurrentLinkedQueue的入队.出队做了一个简要的分析,本文将对并发包中的阻塞队列做一个简要分析. Java并发包中的阻塞队列一共7个,当然他们都是线程 ...
- Context源码分析
我们做安卓开发,时时都在和Context打交道,那么Context到底是什么?有什么作用?如何与Application,Activity,Service等实例发生联系的?等等 Context是什么? ...
- Linux下串口通信工具minicom的用法
一.查看串口设备 例如,将USB转串口线插入交换机Console口后,执行命令:$ll /dev/ttyUSB* 二.连接串口设备 $sudo minicom -D /dev/ttyUSB0 三.设置 ...
- 浏览器内核 网址分解 web服务器
浏览器最核心的部分是渲染引擎(Rendering Engine),我们一般习惯称之为"浏览器内核",其负责解析网页语法(如标准通用标记语言的子集HTML.JavaScript)并渲 ...
- 多线程并发执行任务，取结果归集。终极总结：Future、FutureTask、CompletionService、CompletableFuture
目录 1.Futrue 2.FutureTask 3.CompletionService 4.CompletableFuture 5.总结 ================正文分割线========= ...
- 将数据库从服务器移到浏览器--indexedDB基本操作封装
数据库是属于服务器的,这是天经地义的事,但是有时候数据也许并非需要存储在服务器,但是这些数据也是一条一条的记录,怎么办?今天来带领你领略一下H5的一个新特性--indexedDB的风骚.你会情不自禁的 ...
- loadrunner11的移动端性能测试之脚本录制
以前使用LR11录制过一个app的登录操作,这里记录一下 测试准备 硬件要求 1, 负载测试机一台(内存8G以上,cpu 1.5GHZ以上,存储空间20G以上)或两台以上(控制机和多个负载机). 2 ...
- v9更换域名
网站在发展的过程中,很可能多次的修改域名.那么在PHPCMS V9中我们要怎么进行设置呢? 请进行以下步骤的修改: 修改/caches/configs/system.php里面所有和域名有关的,把以前 ...
- ASP.NET Core 源码学习之 Options[2]:IOptions
在上一篇中,介绍了一下Options的注册,而使用时只需要注入IOption即可: public ValuesController(IOptions<MyOptions> options) ...