<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>34</title>
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css">
</head>
<body>
<div ng-app="myApp" style="margin-top: 100px;">
<form name="myForm" action="form" 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" ng-class="{'has-error':myForm.password.$dirty && myForm.password.$invalid}">
<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" ng-class="{'has-error':myForm.passwordConfirm.$dirty && myForm.passwordConfirm.$invalid}">
<label class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
<input type="password" autocomplete="off" name="passwordConfirm" ng-required="true" ng-model="data.passwordConfirm" class="form-control" placeholder="确认密码">
<div ng-show="myForm.password.$dirty && myForm.passwordConfirm.$dirty && data.password !== data.passwordConfirm" class="alert alert-danger help-block">
密码和确认密码不一致
</div>
</div>
</div>
<div class="form-group" ng-class="{'has-error':myForm.email.$dirty && myForm.email.$invalid}">
<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" ng-class="{'has-error':myForm.blog.$dirty && myForm.blog.$invalid}">
<label class="col-sm-2 control-label">博客网址</label>
<div class="col-sm-10">
<input type="url" autocomplete="off" name="blog" ng-required="true" ng-minlength="5" ng-maxlength="30" ng-model="data.blog" class="form-control" placeholder="博客网址">
<div ng-show="myForm.blog.$dirty && myForm.blog.$error.maxlength" class="alert alert-danger help-block">
网址长度不能超过30位
</div>
<div ng-show="myForm.blog.$dirty && myForm.blog.$error.minlength" class="alert alert-danger help-block">
网址长度不能小于5位
</div>
<div ng-show="myForm.blog.$dirty && myForm.blog.$error.url" class="alert alert-danger help-block">
网址格式不正确
</div>
</div>
</div>
<div class="form-group" ng-class="{'has-error':myForm.age.$dirty && myForm.age.$invalid}">
<label class="col-sm-2 control-label">年龄</label>
<div class="col-sm-10">
<input type="number" autocomplete="off" name="age" min="10" max="99" ng-required="true" ng-model="data.age" class="form-control" placeholder="年龄">
<div ng-show="myForm.age.$dirty && myForm.age.$error.max" class="alert alert-danger help-block">
年龄不能超过99岁
</div>
<div ng-show="myForm.age.$dirty && myForm.age.$error.min" class="alert alert-danger help-block">
年龄不能小于10岁
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" ng-required="true" name="sex" ng-model="data.sex" value="1" /> 男
</label>
<label class="radio-inline">
<input type="radio" ng-required="true" name="sex" ng-model="data.sex" value="0" /> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">爱好</label>
<div class="col-sm-10">
<label class="checkbox-inline" ng-repeat="hobby in hobbies">
<input type="checkbox" ng-model="hobby.checked" name="hobby[]" ng-checked="data.hobbies === undefined ? false : data.hobbies.indexOf(hobby.id) !== -1" ng-click="toggleHobbySelection(hobby.id)"/> {{hobby.name}}
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">出生地</label>
<div class="col-sm-3">
<select class="form-control" ng-change="data.area = false" ng-model="data.province" ng-options="x.id as x.name for x in cities | cityFilter:0"></select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-show="data.province" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityFilter:data.province"></select>
</div>
<div class="col-sm-3">
<select class="form-control" ng-required="true" ng-show="data.province && data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityFilter:data.area"></select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">只能输入偶数</label>
<div class="col-sm-10">
<input type="text" name="even" class="form-group" placeholder="偶数" ng-model="data.even" even>
<div ng-show="myForm.even.$error.even
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
AngularDemo.rar (71个子文件)
AngularDemo
04-ngbind
04.html 503B
26-自定义指令 templateUrl属性
26.html 520B
tmp
other.html 25B
app
controller.js 561B
06-$scope里的$apply方法
06.html 1KB
12-模块
12.html 495B
app
31-自定义指令 scope 属性
31.html 449B
app
controller.js 1KB
14-$provide里面的factory、service方法
14.html 283B
app
controller.js 808B
18-19产品列表 过滤器
app
controller.js 1KB
18.html 2KB
03-控制器
03.html 369B
app
controller.js 161B
05-多个控制器
05.html 812B
app
controller.js 293B
34-Form
34.html 9KB
app
controller.js 5KB
01-依赖注入
01.html 432B
32-自定义accordion指令
32.html 598B
app
tmp
kittencupCollapse.html 360B
controller.js 2KB
16-过滤器current number date
16.html 601B
app
22-24内置指令
other.html 21B
22.html 1KB
app
img
angular.jpg 8KB
controller.js 508B
28-自定义指令 compile && link属性
28.html 546B
app
controller.js 3KB
08-11购物车
08.html 2KB
app
controller.js 3KB
21-控制器的合理使用、显示和隐示的依赖注入
21.html 338B
app
controller.js 353B
13-$provide里面的provider方法
13.html 283B
app
controller.js 387B
15-多个控制器内数据共享
15.html 498B
app
controller.js 509B
25-自定义指令 restrict、template、replace属性
25.html 417B
app
controller.js 350B
27-自定义指令 transclude、priority、terminal属性
27.html 427B
app
controller.js 933B
30-自定义指令 require 属性
app
controller.js 1KB
30.html 350B
07-$scope里的$watch方法
07.html 1KB
17-过滤器limitTo lowercase
app
controller.js 1KB
17.html 2KB
33-模块里的constant、value、run方法
33.html 309B
app
controller.js 699B
29-自定义指令 controller && controllAs属性
29.html 350B
app
controller.js 1KB
02-数据绑定
02.html 342B
vendor
bootstrap
js
npm.js 484B
bootstrap.js 68KB
bootstrap.min.js 36KB
fonts
glyphicons-halflings-regular.ttf 44KB
glyphicons-halflings-regular.woff2 18KB
glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB
glyphicons-halflings-regular.woff 23KB
css
bootstrap-theme.min.css.map 25KB
bootstrap-theme.css.map 47KB
bootstrap.min.css.map 529KB
bootstrap.min.css 118KB
bootstrap-theme.min.css 23KB
bootstrap-theme.css 26KB
bootstrap.css.map 380KB
bootstrap.css 143KB
angular
angular_1.4.6.js 153KB
angular.js 1.21MB
20-自定义过滤器
20.html 421B
app
controller.js 1KB
共 71 条
- 1
资源评论
cencens
- 粉丝: 0
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功