<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../js/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp" style="margin-top:50px;">
<form name="myForm" action="" ng-controller="firstController" class="container form-horizontal">
<div class="form-group" ng-class="{'has-error':myForm.username.$dirty && myForm.username.$invalid}">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" autocomplete="off" name="username" ng-pattern="/^[a-zA-Z]{1}/" ng-required="true" ng-minlength="5" ng-maxlength="10" ng-model="data.username" class="form-control" placeholder="用户名">
<div ng-show="myForm.username.$dirty && myForm.username.$error.maxlength" class="alert alert-danger help-block">
用户名长度不能超过10位
</div>
<div ng-show="myForm.username.$dirty && myForm.username.$error.minlength" class="alert alert-danger help-block">
用户名长度不能小于5位
</div>
<div ng-show="myForm.username.$dirty && myForm.username.$error.pattern" class="alert alert-danger help-block">
用户名必须已英文字母开始
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" >密码</label>
<div class="col-sm-10">
<input type="password" autocomplete="off" name="password" ng-required="true" ng-minlength="5" ng-maxlength="10" ng-model="data.password" class="form-control" placeholder="密码"/>
<div ng-show="myForm.password.$dirty&&myForm.password.$error.maxlength" class="alert alert-danger help-block">
密码不能超过10位
</div>
<div ng-show="myForm.password.$dirty&&myForm.password.$error.minlength" class="alert alert-danger help-block">
密码不能小于5位
</div>
</div>
</div>
<div class="form-group" >
<label class="col-sm-2 control-label" >确定密码</label>
<div class="col-sm-10">
<input type="password" autocomplete="off" name="conFirmPassword" ng-required="true" ng-model="data.conFirmPassword" class="form-control" placeholder="确认密码"/>
<div ng-show="myForm.password.$dirty && myForm.conFirmPassword.$dirty &&data.conFirmPassword!==data.password" class="alert alert-danger help-block">
密码和确认密码不一致
</div>
</div>
</div>
<div class="form-group" >
<label class="col-sm-2 control-label" >邮箱</label>
<div class="col-sm-10">
<input type="email" autocomplete="off" name="email" ng-required="true" ng-minlength="5" ng-maxlength="30" ng-model="data.email" class="form-control" placeholder="邮箱"/>
<div ng-show="myForm.email.$dirty && myForm.email.$error.maxlength" class="alert alert-danger help-block">
邮箱长度不能大于30位
</div>
<div ng-show="myForm.email.$dirty && myForm.email.$error.minlength" class="alert alert-danger help-block">
邮箱长度不能小于5位
</div>
<div ng-show="myForm.email.$dirty && myForm.email.$error.email" class="alert alert-danger help-block">
邮箱格式不正确
</div>
</div>
</div>
<div class="form-group" >
<label class="col-sm-2 control-label" >年龄</label>
<div class="col-sm-10">
<input type="number" autocomplete="off" name="age" ng-required="true" ng-minlength="2" ng-maxlength="2" ng-model="data.age" class="form-control" placeholder="博客"/>
<div ng-show="myForm.age.$dirty && myForm.age.$error.maxlength" class="alert alert-danger help-block">
年龄不能大于99岁
</div>
<div ng-show="myForm.age.$dirty && myForm.age.$error.minlength" class="alert alert-danger help-block">
年龄不能小于10岁
</div>
<div ng-show="myForm.age.$dirty && myForm.age.$error.number" class="alert alert-danger help-block">
年龄式不正确
</div>
</div>
</div>
</form>
</div>
</body>
</html>
AngularJs demo 例子（表单验证) form
5星 · 超过95%的资源 需积分: 10 20 浏览量
2015-08-31
12:48:31
上传
评论
收藏 485KB ZIP 举报 
code.zip （17个子文件） 
bootstrap css 
bootstrap-theme.css 26KB bootstrap.css.map 381KB bootstrap.min.css 120KB bootstrap.css 144KB bootstrap-theme.min.css 23KB bootstrap-theme.css.map 47KB fonts glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.woff2 18KB glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB js npm.js 484B bootstrap.min.js 36KB bootstrap.js 67KB form 
index.html 5KB script.js 79B js angular.js 1.02MB
- 1
- 2
- 3
前往页