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自带验证功能；
【主页代码如下】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 7 8 <link rel="stylesheet" type="text/css" href="libs/bootstrap.css"/> 9 <link rel="stylesheet" type="text/css" href="css/index.css"/> 10 <link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/> 11 </head> 12 <!--↑插入css样式--> 13 <body ng-app="login" ng-controller="login" class="row container-fluid"> 14 <!--↑设置angular指令，控制器指令，bootstrap样式占满全屏--> 15 <section class="col-sm-8 col-md-3 col-xs-10" > 16 <!--↑响应式样式--> 17 <div id="wai"> 18 <!--↑白底的id--> 19 <div class="header">Login to your accout</div> 20 <!--↑头部标题--> 21 <form action="" method="post" name="myForm" novalidate> 22 <!--↑form表单--> 23 <div class="name"> 24 <!--↑用户行设置--> 25 <span class="iconfont icon-name"></span> 26 <!--↑字体样式--> 27 <input type="text" name="name" id="name" value="" placeholder="Username" ng-model="name"/> 28 <!--↑输入框设置--> 29 </div> 30 <span class="ts1" ng-show="myForm.name.$pristine||name==''">请输入账户</span> 31 <!--↑判断输入框内容没有被填写时或者输入内容为空时出现字体--> 32 <div class="pwd"> 33 <!--↑密码行设置--> 34 <span class="iconfont icon-denglu-suotou"></span> 35 <!--↑输入框设置--> 36 <input type="password" name="pwd" id="pwd" value="" placeholder="password" ng-model="pwd"/> 37 <!--↑判断输入框内容没有被填写时或者输入内容为空时出现字体--> 38 </div> 39 <span class="ts2" ng-show="myForm.pwd.$pristine||pwd==''">请输入密码</span> 40 <div class="yz"> 41 <div class="yz-1"> 42 <input type="text" name="yz" id="code_input" ng-model="yz" placeholder="请输入验证码"/> 43 </div> 44 <div id="container"></div> 45 46 </div> 47 48 <div class="foot"> 49 <div class="zi"><span class="zi1">忘记密码</span>丨<span class="zi2" ng-click="login2()" >立即注册</span></div> 50 <button id="my_button" type="button" value="登录" ng-click="login()" >Login</button> 51 </div> 52 </form> 53 54 </div> 55 </section> 56 57 </body> 58 <script src="js/gVerify.js" type="text/javascript" charset="utf-8"></script> 59 <script src="libs/angular.js" type="text/javascript" charset="utf-8"></script> 60 <script type="text/javascript"> 61 var verifyCode = new GVerify("container"); 62 angular.module("login",[]) 63 .controller("login",function($scope){ 64 $scope.login = function(){ 65 //↓验证码判断 66 var res = verifyCode.validate(document.getElementById("code_input").value) 67 if(res){ 68 //↓当验证码正确时判断下方 69 if($scope.name == "111" && $scope.pwd == "111"){ 70 window.location = "index3.html?name="+$scope.name; 71 }else{ 72 alert("密码错误，登录失败！！") 73 } 74 }else{alert("验证码输入错误.")} 75 }; 76 $scope.login2 = function(){ 77 /*angular中的自定义方法，ng-click="login2()"调用该方法实现跳转页面*/ 78 window.location="index2.html" 79 } 80 }) 81 82 </script> 83 </html>
【注册页代码如下】
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 7 8 <link rel="stylesheet" type="text/css" href="libs/bootstrap.css"/> 9 <link rel="stylesheet" type="text/css" href="css/index2.css"/> 10 <link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/> 11 </head> 12 <!--↑样式引入--> 13 <body ng-app="login" ng-controller="login"> 14 <!--↑设置angular指令，控制器指令，bootstrap样式占满全屏--> 15 <section> 16 <span class="iconfont icon-guanbi" ng-click="login1()"></span> 17 <!--↑字体样式右上方关闭按钮--> 18 <form action="" method="post" name="myForm" novalidate> 19 <!--↑form表单样式 加入novalidate 看上方文字解释--> 20 <div id="wai"> 21 <!--↑定义白色底部样式--> 22 <div class="header">欢迎注册账号</div> 23 <div class="name"> 24 <!--↑账户行样式--> 25 <span class="iconfont icon-name"></span> 26 <!--↑文字样式--> 27 <input type="text" name="name" id="name" value="" placeholder="账户" ng-model="user.name"/> 28 <!--↑定义angular输入框ng-model--> 29 </div> 30 <!--↓判断，当账户行未填写或者内容为空的时候显示--> 31 <span class="ts1" ng-show="myForm.name.$pristine||user.name==''">请输入账户</span> 32 <div class="pwd"> 33 <!--↑密码行样式--> 34 <span class="iconfont icon-denglu-suotou"></span> 35 <!--↑文字样式--> 36 <input type="password" name="pwd" id="pwd" value="" placeholder="密码" ng-model="user.pwd"/> 37 <!--↑定义angular输入框ng-model--> 38 </div> 39 <!--↓判断，当密码行未填写或者内容为空的时候显示--> 40 <span class="ts2" ng-show="myForm.pwd.$pristine||user.pwd==''">请输入密码</span> 41 <div class="repwd"> 42 <!--↑确认密码行样式--> 43 <span class="iconfont icon-duihao"></span> 44 <!--↑文字样式--> 45 <input type="password" name="repwd" id="repwd" value="" placeholder="确认密码" ng-model="user.repwd"/> 46 <!--↑确认密码输入框--> 47 <br /> 48 <span class="red ts3" ng-show="myForm.repwd.$dirty && user.pwd!=user.repwd">两次密码不相同</span> 49 <!--↑判断确认密码输入框和密码框内容不一致时显示。--> 50 </div> 51 <br /> 52 53 <!--两个button按钮--> 54 <div class="foot"> 55 <button id="my_button1" type="button" class="btn" value="注册" ng-disabled="myForm.$invalid || user.pwd!=user.repwd" ng-click="login1()">注册</button> 56 <button id="my_button2" type="button" class="btn" value="登录" ng-click="resets()" >重置</button> 57 </div> 58 </div> 59 60 </form> 61 </section> 62 63 </body> 64 65 <script src="libs/angular.js" type="text/javascript" charset="utf-8"></script> 66 <script type="text/javascript"> 67 68 angular.module("login",[]) 69 .controller("login",function($scope){ 70 //在scope内部添加一个对象 71 $scope.initUser = { 72 name:'', 73 pwd:'', 74 repwd:'', 75 } 76 //调用angular方法，ng-click="resets()"调用 77 $scope.resets = function(){ 78 //copy出一个新对象，$scope.user地址指向新对象 79 $scope.user = angular.copy($scope.initUser); 80 } 81 //↓调用angular方法，ng-click="resets()"调用 82 $scope.login1 = function(){ 83 //↓跳转新页面 84 window.location = "index.html" 85 } 86 }) 87 </script> 88 </html>
学习时候的笔记，可能会有一些错误的地方，欢迎各位的批评指点。
反思，复盘，每天收获一点---------------------期待更好的自己
