Angular.js实现注册系统的实例详解

前言

相信大家在做项目里经常需要登录注册，那么在用angularjs该如何实现。下面让我们通过angualr.js来实现注册系统表单验证。

Angular下载地址：https://code.angularjs.org/1.5.0/angular.js

首先看一下页面效果（通过bootstrap实现的布局样式）：

当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对angular进一步深入理解。

实现方法如下：

页面布局代码如下：

  </div>
 </div>
 <div class="form-group"&gt;
  <div class="col-xs-3 col-xs-offset-1"&gt;
   <lable for="address"&gt;地址：</lable>
  </div>
  <div class="col-xs-8"&gt;
   <input id="address" type="text" ng-model="data.address" name="address" ng-required="true"&gt;

  </div>
 </div>
 <div class="form-group"&gt;
  <div class="col-xs-3 col-xs-offset-1"&gt;
   <lable for="email"&gt;邮箱：</lable>
  </div>
  <div class="col-xs-8"&gt;
   <input id="email" type="text" ng-model="data.email" name="email" ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/" ng-required="true"&gt;
  </div>
 </div>
 <div class="col-xs-8 col-xs-offset-4 text-danger" style="height:30px;overflow:hidden;"&gt;
  <p ng-show="myForm.username.$invalid && myForm.username.$dirty"&gt;请填写用户名</p>
  <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty"&gt;请填写正确电话</p>
  <p ng-show="myForm.address.$invalid && myForm.address.$dirty"&gt;请填写地址</p>
  <p ng-show="myForm.email.$invalid && myForm.email.$dirty"&gt;请填写正确邮箱</p>
  <p ng-show="showAllErr"&gt;请填写</p>
 </div>
 <div class="form-group"&gt;
  <div class="col-xs-12"&gt;
   <input class="btn btn-success" type="submit" style="width:100%" ng-click="check()"&gt;
  </div>
 </div>
</form>