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 对以下读者有帮助:研发.产品.项目.市场.服务. ...
随机推荐
- python基础之字典dict和集合set
作者:tongqingliu 转载请注明出处:http://www.cnblogs.com/liutongqing/p/7043642.html python基础之字典dict和集合set 字典dic ...
- 编译安装nginx却requires the PCRE library
编译安装nginx需要pcre包,未安装会有如下提示: ./configure: error: the HTTP rewrite module requires the PCRE library. Y ...
- Nodejs的模块系统以及require的机制
一.简介 Nodejs 有一个简单的模块加载系统.在 Nodejs 中,文件和模块是一一对应的(每个文件被视为一个独立的模块),这个文件可能是 JavaScript 代码,JSON 或者编译过的C/C ...
- 神奇的 conic-gradient 圆锥渐变
感谢 LeaVerou 大神,让我们可以提前使用上这么美妙的属性. conic-gradient 是个什么?说到 conic-gradient ,就不得不提的它的另外两个兄弟: linear-grad ...
- JSONArray用法jquery循环list<Map>对象
controoler中 List<Map<String,Object>> resList =(List<Map<String,Object>>)resM ...
- 常用PHP函数的封装
PHP获取文件扩展名(后缀) function getExtension($filename){ $myext = substr($filename, strrpos($filename, '.')) ...
- Example005控制弹出窗口居中显示
<!-- 实例005控制弹出窗口居中显示 --> <head> <meta charset="UTF-8"> </head> < ...
- 利用java反射机制编写solr通用的java客户端
一.前言 通过上一篇的讲解,我们知道了dynamicFiled字段,它是动态的,不需要显示的声明.而且一些常用的基本类型solr已经默认给我们创建好了. 例如:*_i,*_is,等. 如果我们要使用动 ...
- sql将一列数据拼成一个字符串的方法
SELECT STUFF(CONVERT(VARCHAR(500), ( SELECT TOP 10 ',' + BG_Country FROM dbo.BS_Budget FOR XML PATH( ...
- ES6的十大特性和认知
---恢复内容开始--- ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率.本文主要针对E ...