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&&register.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&&register.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>