<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
margin: 0px;
}
</style>
</head>
<!--
AngularJS中的表单验证
1、表单中常用的验证操作
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2、验证时需给表单及需要验证的input设置name属性，因为给form及input设置name后
会将form表单信息，默认绑定到$scope作用域中。故，可以使用formName.inputName.$验证操作
得到验证结果
eg:formName.inputName.$dirty="true" 表单有填写记录
formName.inputName.$invalid="true" 字段内容是非法的
formName.inputName.$error.required="true" 表单必填但未填
$error 支持的验证
required/minlength/maxlength/pattern/email/number/date/url等
3、<form novalidate></form>属性，禁用H5自带验证功能
-->
<body ng-app="app" ng-controller="ctrl">
<div class="container" style=" 70%;margin: 50px;">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" style="text-align: center;">
用户注册
</div>
</div>
<div class="panel-body">
<form class="form-inline" name="form" novalidate>
<div class="form-group">
<div class="col-xs-4">
用户名
</div>
<div class="col-xs-8">
<input type="text" class="form-control" ng-model="user.name" name="user1" ng-min-length="4" ng-max-length="10" required/>
<!--表单有填写记录且不合法时-->
<p style="color: red; margin: 0px;" ng-show="form.user1.$invalid&&form.user1.$dirty" >111</p>
<span ng-show="form.user1.$error.required">用户名必须填写</span>
<span ng-show="form.user1.$error.">用户名必须填写</span>
<span ng-show="form.user1.$error.required">用户名必须填写</span>
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
密码：
</div>
<div class="col-xs-8">
<input type="password" class="form-control" ng-model="user.pwd" name="pwd1"/>
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
邮箱
</div>
<div class="col-xs-8">
<input type="text" class="form-control" ng-model="user.mail" name="mail1" required/>
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
确认密码
</div>
<div class="col-xs-8">
<input type="password" class="form-control" name="checkPwd1" />
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-xs-5">
<input type="submit" value="注册" class="btn btn-primary" ng-disabled="form.$dirty&&form.$invalid" style="background-color:burlywood ;"/>
</div>
<div class="col-xs-5">
<input type="button" value="重置" class="btn btn-warning" ng-click="resets()"/>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<h1></h1>
</body>
<script src="libs/angular.js"></script>
<script>
/* 【】
*
*/
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.initUser={
name:'杰小瑞',
mail:'www.aaa@qq.com',
pwd:'000'
}
$scope.resets=function(){
//对象、数组均为引用数据类型，传递的是地址，其中一个变，另一个也跟着变
$scope.user=angular.copy($scope.initUser);
}
// $scope.resets();
})
</script>
</html>