Angular表单验证

一、Angular表单验证能解决那些问题？

1.如何数据绑定

2.验证表单

3.显示出错信息

4.整个Form验证

5.避免提交没有验证通过的表单

6.防止多次提交

二、Angular的input标签

name  名字（必须）

ng-model 绑定的数据

ng-required 是否必填

ng-minlength 最小长度

ng-maxlength 最大长度

ng-pattern 匹配模式

ng-change 值变化时回调

字段是否未更改

formName.inputFieldName.$pristine

字段是否更改

formName.inputFieldName.$dirty

字段有效

formName.inputFieldName.$valid

字段无效

formName.inputFieldName.$invalid

字段错误信息

formName.inputFieldName.$error

密码验证的模板
<!--密码及验证-->
<div class="form-group" ng-class="{'has-error':register.password.$invalid&®ister.password.$dirty}">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" name="password" ng-required="true" ng-minlength="12" ng-maxlength="24" ng-model="data.password"class="form-control" placeholder="请输入密码">
<div ng-show="register.password.$error.maxlength" class="alert alert-danger" role="alert">
密码长度不能超过24位
</div>
<div ng-show="register.password.$error.minlength" class="alert alert-danger" role="alert">
密码长度不能小于12位
</div>
</div>
</div>
<div class="form-group" ng-class="{'has-error':register.passwordConfirm.$invalid&®ister.passwordConfirm.$dirty}">
<label class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
<input type="password" name="passwordConfirm" ng-required="true" ng-minlength="12" ng-maxlength="24" ng-model="data.passwordConfirm"class="form-control" placeholder="请确认密码">
<div ng-show="data.passwordConfirm != data.password" class="alert alert-danger" role="alert">
密码与确认密码不一致！
</div>
</div>
</div>