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 对以下读者有帮助:研发.产品.项目.市场.服务. ...
随机推荐
- 网购的一套UI代码的始末
引言: 一个商业项目的需要,又因为时间紧迫的关系,准备购买一套简洁,易用,可定制化强的UI,经过对国内外多家UI产品进行了对比, 包括:FineUI, EasyUI, EXT.NET, EXTJS, ...
- Spring学习（8）--- @Autowired注解(一)
可以将@Autowired注解为“传统”的setter方法 package com.mypackage; import org.springframework.beans.factory.annota ...
- zookeeper-开始
ZooKeeper:为分布式应用提供的分布式协调服务 ZooKeeper提供一系列原语用于分布式应用构建更高层次的服务,如同步.配置维护.分组以及命名空间. 设计目标: ZooKeeper足够简单且可 ...
- 12.ThreadPoolExecutor线程池原理及其execute方法
jdk1.7.0_79 对于线程池大部分人可能会用,也知道为什么用.无非就是任务需要异步执行,再者就是线程需要统一管理起来.对于从线程池中获取线程,大部分人可能只知道,我现在需要一个线程来执行一个任 ...
- 学习总结------Servlet的简单理解
1.什么是Servlet Servlet是一个Java编写的程序,在服务器端运行的(如tomcat) Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览 ...
- B. Karen and Coffee
B. Karen and Coffee time limit per test 2.5 seconds memory limit per test 512 megabytes input standa ...
- CSS技巧和经验列表
如何清除图片下方出现几像素的空白间隙? img{display:block;} 如何让文本垂直对齐文本输入框? input{vertical-align:middle;} 如何使文本溢出边界显示为省略 ...
- js中的匿名函数自执行
随笔,java中因为有修饰符的存在,那就有private类的存在,js不一样,没有修饰词一说,因此为了防止全局变量的污染,js中就出现了匿名函数,直接上code,看到的人可以自己体会: (functi ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 第14章 Linux开机详细流程
本文目录: 14.1 按下电源和bios阶段 14.2 MBR和各种bootloader阶段 14.2.1 boot loader 14.2.2 分区表 14.2.3 采用VBR/EBR方式引导操作系 ...