您的位置：首页 > Web前端 > AngularJS

Angularjs登陆-Form测试

2015-10-03 17:43 561 查看

1.初始化

2.输入错误

3.输入正确

4.代码

4.1 demo.html

<!DOCTYPE html>
<html  ng-app="myApp">
<head>
<script src="js/angular.js"></script>
<script src="demo.js"></script>
<link href="demo.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ng-controller="myController" ng-init="init()">
<form name="myForm" ng-submit="alertOk()">
<div>
<label for="myName">Name :</label>
<input type="text" ng-model="name" required ng-maxlength=20 ng-minlength=2 name="myName" id="myName" placeholder="请输入姓名"></p>
<div ng-if="myForm.myName.$dirty && myForm.myName.$error.required" class="errorinfo labelmargin">姓名必须填写</div>
<div ng-if="myForm.myName.$dirty && myForm.myName.$error.maxlength" class="errorinfo labelmargin">不能超过20个字符</div>
<div ng-if="myForm.myName.$dirty && myForm.myName.$error.minlength" class="errorinfo labelmargin">最少两个字符</div>
</div>

<div>
<label for="myPwd">Password :</label>
<input type="password" ng-model="pwd" required name="myPwd"  id="myPwd" placeholder="请输入密码" ng-pattern="/^[A-Z][\_\@\.]([a-zA-Z0-9]){4,19}$/"></p>
<div ng-if="myForm.myPwd.$dirty && myForm.myPwd.$error.required" class="errorinfo labelmargin">密码必须填写</div>
<div ng-if="myForm.myPwd.$dirty && myForm.myPwd.$error.pattern" class="errorinfo labelmargin">第一个字符必须是大写字母，第二个字符必须是“.”、"_"、"@"其中一个，剩下为大小写字母或者数字。最少6个字符，最多20个字符。</div>
</div>
<input type="submit" id="submitbtn" ng-disabled="myForm.$invalid"class="labelmargin"/>
</form>
</div>
</body>
</html>

4.2 demo.js

/*
*   Auth : Danny
*   Date : 2015-10-03
*
*
*/

angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {

$scope.init = function() {
$scope.name = "";
};

$scope.alertOk = function() {
alert("OK");
};

$scope.count = 0;
$scope.$watch('name', function() {
//if( newValue === oldValue ) console.log("same value") return;
$scope.count++;
console.log("count : " + $scope.count + " ||  Time : " + new Date());
});
}]);

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航