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
时间： 2024-10-24 13:46:39