AugularJS从入门到实践(三)

 

  前  言

 前端 

   
AngularJS是为了克服HTML在构建利用达到之贫乏使计划的。(引用百度百科)

  AngularJS使用了不同之计,它尝试去补足HTML本身在构建以方面的缺点。AngularJS通过运用我们誉为指令(directives)的构造,让浏览器会分辨新的语法。 style=”font-size: 14px; font-family: ‘Microsoft YaHei’;”>(引用百度百科)

   

   例如:

 

        使用对大括声泪俱下{{}}语法进行多少绑定;

 

        使用DOM控制结构来促成迭代或者隐藏DOM片段;

 

        支持表单和表单的印证;

 

        能拿逻辑代码关联到有关的DOM元素上;

 

        能用HTML分做可选用的组件。

 

style=”font-size: 14px; font-family: ‘Microsoft YaHei’;”>本篇学习重点发生些许独片:

  【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                 
26                 <!--↑字体样式-->
27                 <input type="text" name="name" id="name" value="" placeholder="Username" ng-model="name"/>
28                 <!--↑输入框设置-->
29             </div>
30                 请输入账户
31                 <!--↑判断输入框内容没有被填写时或者输入内容为空时出现字体-->
32             <div class="pwd">
33                 <!--↑密码行设置-->
34                 
35                 <!--↑输入框设置-->
36                 <input type="password" name="pwd" id="pwd" value="" placeholder="password" ng-model="pwd"/>
37                 <!--↑判断输入框内容没有被填写时或者输入内容为空时出现字体-->
38             </div>
39                 请输入密码
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">忘记密码丨立即注册</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             
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                 
26                 <!--↑文字样式-->
27                 <input type="text" name="name" id="name" value="" placeholder="账户" ng-model="user.name"/>
28                 <!--↑定义angular输入框ng-model-->
29             </div>
30                 <!--↓判断,当账户行未填写或者内容为空的时候显示-->
31                 请输入账户
32             <div class="pwd">
33                 <!--↑密码行样式-->
34                 
35                 <!--↑文字样式-->
36                 <input type="password" name="pwd" id="pwd" value="" placeholder="密码" ng-model="user.pwd"/>
37                 <!--↑定义angular输入框ng-model-->
38             </div>
39                 <!--↓判断,当密码行未填写或者内容为空的时候显示-->
40                 请输入密码
41             <div class="repwd">
42                 <!--↑确认密码行样式-->
43                 
44                 <!--↑文字样式-->
45                 <input type="password" name="repwd" id="repwd" value="" placeholder="确认密码" ng-model="user.repwd"/>
46                 <!--↑确认密码输入框-->
47             <br />
48             两次密码不相同
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>

 

  

 

 

上上的笔记,可能会见发局部破绽百出的地方,欢迎各位的批评指点。

反思,复盘,每天得到一点———————期待再次好之友善

 

相关文章