angular实现表单验证及提交功能

本例通过Angular框架来实现简单的表单验证

一、html结构

1、借助于bootstrap快速的编写了一个简单的表单
代码主要部分如下： 

<div class="container" style="margin-top: 30px;" ng-controller="myCtrl">  <h1 style="text-align: center">用户表单提交</h1>  <form action="upload.js" class="form-horizontal" name="myForm">    <div class="form-group">      <label for="username" class="col-sm-3 control-label">用户名</label>      <div class="col-sm-9">        <input type="text" autocomplete="false" name="username" placeholder="用户名" ng-model="data.username" id="username" class="form-control" required>        <div class="alert alert-danger help-block" >          用户名长度不能小于5位        </div>        <div class="alert alert-danger help-block" >          用户名长度不能大于15位        </div>      </div>    </div>  </form> </div>

2、表单验证常见问题及指令

1）、问题：
》如何绑定数据——双向绑定
》验证表单——正则表达式
》显示错误信息
》整个Form的验证
》避免提交没通过验证的表单
》防止多次提交
2）、常用指令
》指令：
ng-model,ng-required,ng-pattern,ng-maxlength,ng-minlength,ng-change
》样式：
ng-valid,ng-invalid,ng-pristine,ng-dirty
》form控制变量
formName.inputFieldName.$error:字段错误信息
formName.inputFieldName.$dirty:字段是否修改
formName.inputFieldName.$pristine:字段是否是初始状态
formName.inputFieldName.$valid:字段是否有效
formName.inputFieldName.$invalid:字段是否无效

二、功能实现

2.1 用户名验证
用户输入用户名字段验证主要是长度验证，以及是否必须

1、ng-model绑定表单数据，以便使用angular的验证api
2、ng-minlength,ng-maxlength规定字段长段，required规定字段必填
3、错误提示信息通过formName.inputFieldName.$error.minlength/maxlength决定是否要显示，当输入不合法时，$error对应的错误信息会为true
如下：

  <div class="form-group">    <label for="username" class="col-sm-3 control-label">用户名</label>    <div class="col-sm-9">      <input type="text" autocomplete="false" name="username" placeholder="用户名" ng-model="data.username" id="username" ng-minlength="5" ng-maxlength="15" class="form-control" required>      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.minlength">        用户名长度不能小于5位      </div>      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.maxlength">        用户名长度不能大于15位      </div>    </div>  </div>