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       

 

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>

 

  

 

 

学学时候的笔记,可能会有一对荒唐的地点,欢迎各位的批评引导。

自省,复盘,每一日获得一点———————期待更好的协调

 

相关文章