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 对以下读者有帮助:研发.产品.项目.市场.服务. ...
随机推荐
- abstract关键字
概念 abstract关键字表示的是抽象的意思,可以用来修饰类和方法.修饰类我们称为抽象类,修饰方法我们称为抽象方法. abstract修饰类,抽象类 1.public abstract clas ...
- 基于FPGA的均值滤波算法的实现
前面实现了基于FPGA的彩色图像转灰度处理,减小了图像的体积,但是其中还是存在许多噪声,会影响图像的边缘检测,所以这一篇就要消除这些噪声,基于灰度图像进行图像的滤波处理,为图像的边缘检测做好夯实基础. ...
- Dojo初探之2:设置dojoConfig详解，dojoConfig参数详解+Dojo中预置自定义AMD模块的四种方式（基于dojo1.11.2）
Dojo中想要加载自定义的AMD模块,需要先设置好这个模块对应的路径,模块的路径就是这个模块的唯一标识符. 一.dojoConfig参数设置详解 var dojoConfig = { baseUrl: ...
- javascript对象(1)
今天说面向对象,嗯,不是那个对象,是这个对象. 接下来就开始今天的内容: 什么是面向对象: 就是把数据及数据的操作方法放在一起,作为一个相互依存的整体----对象.对同类对象抽象出其共性,形成类. 类 ...
- 【翻译Autofac的帮助文档】1.入门指南
[写在前面]尝试做完一件工作之外自我觉得有意义的一件事,那就从翻译Autofac的帮助文档吧. 入门指南 将Autofac集成你的应用程序的步骤通常很简单,一般是: 时刻以IOC(控制反转)的思想来规 ...
- markdown基础
介绍: markdown是一种可以使用普通文本编译器编写的标记语言,通过简单的标记语法,它可以使普通文本具有一定的格式.说的简单一点,markdown其实就是一种简单的文本,与普通的文本文件(txt文 ...
- java 获得当前时间 年月日时分秒 星期几
<%SimpleDateFormat df = new SimpleDateFormat("yyyy年MM月dd日 HH时mm分ss秒");//设置日期格式SimpleDat ...
- [Unity] A* pathfinding project integrated with influence map
简介 最近一阶段重温了一些关于游戏人工智能方面的书籍. 加强了对influence map的认知.想要亲自动手实现一下. 正如文章标题所示,这篇文章讲的是:如何将influence map的机制融入到 ...
- Linux系统vi模式下显示行号
在命令模式下输入:set nu或者:set number都可以为vi设置行号,如果要取消的话,则输入:set nonu行号的设置是vi的环境设置,不会影响文本的内容.
- Linux下php安装memcache
Linux下php安装memcache说明:php安装目录:/phpstudy/server/php/bin/phpphp.ini配置文件路径:/phpstudy/server/php/etc/php ...