<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myController">
<head>
<meta charset="utf-8">
<script src="js/angular.min.js"></script>
<link rel="stylesheet" href="css/ng-form.css">
<script src="js/ngForm.js"></script>
</head>
<body>
<form class="login-form"
name="myForm" novalidate>
<h1> form Directives </h1>
<div class="form-group ">
<input type="text" class="form-control" placeholder="Username " name="maxlength" ng-model="maxlength" ng-maxlength="8" required >
</div>
<span class="alert" style="color:red" ng-show="myForm.maxlength.$dirty && myForm.maxlength.$invalid">
<span ng-show="myForm.maxlength.$error.maxlength">最大长度为8位。</span>
</span>
<div class="form-group log-status">
<input type="email" name="email" ng-model="email" class="form-control" placeholder="email" required>
</div>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
<div class="form-group ">
<input type="text" class="form-control" placeholder="password " name="password" ng-model="minlength" ng-minlength="4" required >
</div>
<span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<span ng-show="myForm.password.$error.minlength">最小长度为4位。</span>
</span>
<div class="sex">
<input class="male" ng-model="sex" type="radio" value="男" />男
<input class="female" ng-model="sex" type="radio" value="女" />女
</div>
<button type="button" class="log-btn" ng-click="login(user)" >Log in</button>
</form>
<div class="data" style="border: 1px solid #35aa47; width: 200px;height:200px;">
<label> 提交的数据:</label>
<br>
username:{{maxlength}} <br>
email: {{email}} <br>
sex:{{sex}} <br>
password:{{minlength}}
</div>
</body>
</html>
评论2
最新资源