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