Angularjs登陆-Form测试

1.初始化

2.输入错误

3.输入正确

4.代码

4.1 demo.html

 1 <!DOCTYPE html>
 2 <html  ng-app="myApp">
 3    <head>
 4         <script src="js/angular.js"></script>
 5         <script src="demo.js"></script>
 6         <link href="demo.css" rel="stylesheet" type="text/css"/>
 7    </head>
 8    <body>
 9     <div ng-controller="myController" ng-init="init()">
10       <form name="myForm" ng-submit="alertOk()">
11           <div>  
12               <label for="myName">Name :</label>
13               <input type="text" ng-model="name" required ng-maxlength=20 ng-minlength=2 name="myName" id="myName" placeholder="请输入姓名"></p>
14               <div ng-if="myForm.myName.$dirty && myForm.myName.$error.required" class="errorinfo labelmargin">姓名必须填写</div>
15               <div ng-if="myForm.myName.$dirty && myForm.myName.$error.maxlength" class="errorinfo labelmargin">不能超过20个字符</div>
16               <div ng-if="myForm.myName.$dirty && myForm.myName.$error.minlength" class="errorinfo labelmargin">最少两个字符</div>
17           </div>
18           
19           <div>  
20               <label for="myPwd">Password :</label>
21               <input type="password" ng-model="pwd" required name="myPwd"  id="myPwd" placeholder="请输入密码" ng-pattern="/^[A-Z][\_\@\.]([a-zA-Z0-9]){4,19}$/"></p>
22               <div ng-if="myForm.myPwd.$dirty && myForm.myPwd.$error.required" class="errorinfo labelmargin">密码必须填写</div>
23               <div ng-if="myForm.myPwd.$dirty && myForm.myPwd.$error.pattern" class="errorinfo labelmargin">第一个字符必须是大写字母，第二个字符必须是“.”、"_"、"@"其中一个，剩下为大小写字母或者数字。最少6个字符，最多20个字符。</div>
24           </div>          
25           <input type="submit" id="submitbtn" ng-disabled="myForm.$invalid"class="labelmargin"/>
26       </form>
27     </div>
28     </body>
29 </html>

4.2 demo.js

 

 1 /*
 2 *   Auth : Danny 
 3 *   Date : 2015-10-03
 4 *
 5 *
 6 */
 7 
 8 angular.module('myApp', [])
 9    .controller('myController', ['$scope', function($scope) {
10 
11        $scope.init = function() {
12             $scope.name = "";   
13        };  
14        
15        $scope.alertOk = function() {
16            alert("OK");
17        };
18        
19        $scope.count = 0;
20        $scope.$watch('name', function() {
21            //if( newValue === oldValue ) console.log("same value") return;
22            $scope.count++;
23            console.log("count : " + $scope.count + " ||  Time : " + new Date());
24        });       
25    }]);

 

4.3 demo.css

 

.errorinfo{
   font-size : 10px ;
   color : red
   
}

input.ng-invalid.ng-dirty{ border : 1px solid red;}

label{
  float : left;
  width : 150px;
  text-align : right;
  padding-right : 12px;
  margin-top : 12px;
  clear : left;
}

.labelmargin{  margin-left : 162px; }

#myPwd{  margin-top : 12px;}
#myName{ margin-top : 12px;}
#submitbtn{ margin-top : 12px;}

 

4.4 angular.js版本 1.3.14

 

5.参考视频

    angular form :  https://www.youtube.com/watch?v=t6XUPVmlYbY 
    css from       :  https://www.youtube.com/watch?v=B8gsh6ZmJpg 

posted @ 2015-10-03 17:43  金色元年  阅读(273)  评论(0)  编辑  收藏  举报