Angular是Google开发的前端技术框架 ，下载地址：https://code.angularjs.org/1.5.0/angular.js
通过对angular的简单理解后发现，angular通过一些简单的指令即可实现对DOM元素的操作，其特色为双向数据绑定
下面，让我们通过angualr来实现注册系统表单验证。
首先看一下页面效果（通过bootstrap实现的布局样式）：
当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对angular进一步深入理解。
页面布局代码如下：
1 <! DOCTYPE html >
2 < html lang ="en" >
3 < head >
4 < meta charset ="UTF-8" >
5 < meta http-equiv ="X-UA-Compatible" content ="IE=edge" > //设置按照edge浏览器渲染方式渲染
6 < meta name ="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" > //设置页面宽度，缩放比例，用户不能缩放
7 < title > 注册 </ title >
8 < link rel ="stylesheet" href ="bootstrap.min.css" >
9 < style >
10 input {
11 outline : none ; //去掉chrome浏览器输入框内的蓝色边框
12 }
13 </ style >
14 </ head >
15 < body ng-app ="myApp" >
16 < div ng-controller ="myCtr" >
17 < div class ="container" >
18 < h2 class ="text-center" > 注册系统 </ h2 >
19 < div class ="row" >
20 < form name ="myForm" class ="form-horizontal" >
21 < div class ="form-group" >
22 < div class ="col-xs-3 col-xs-offset-1" >
23 < lable for ="username" > 用户名： </ lable >
24 </ div >
25 < div class ="col-xs-8" >
26 < input id ="username" type ="text" ng-model ="data.username" name ="username" ng-required ="true" > //ng-required="true"是设置输入框内必须填写内容，下同
27 </ div >
28 </ div >
29 < div class ="form-group" >
30 < div class ="col-xs-3 col-xs-offset-1" >
31 < lable for ="tel" > 电话： </ lable >
32 </ div >
33 < div class ="col-xs-8" >
34 < input id ="tel" type ="text" ng-model ="data.tel" name ="tel" ng-pattern ="/^1\d{10}$/" ng-required ="true" > //ng-pattren="/XXX/"是设置正则验证，下同
35
36 </ div >
37 </ div >
38 < div class ="form-group" >
39 < div class ="col-xs-3 col-xs-offset-1" >
40 < lable for ="address" > 地址： </ lable >
41 </ div >
42 < div class ="col-xs-8" >
43 < input id ="address" type ="text" ng-model ="data.address" name ="address" ng-required ="true" >
44
45 </ div >
46 </ div >
47 < div class ="form-group" >
48 < div class ="col-xs-3 col-xs-offset-1" >
49 < lable for ="email" > 邮箱： </ lable >
50 </ div >
51 < div class ="col-xs-8" >
52 < 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" >
53 </ div >
54 </ div >
55 < div class ="col-xs-8 col-xs-offset-4 text-danger" style ="height:30px;overflow:hidden;" >
56 < p ng-show ="myForm.username.$invalid && myForm.username.$dirty" > 请填写用户名 </ p >
57 < p ng-show ="myForm.tel.$invalid && myForm.tel.$dirty" > 请填写正确电话 </ p >
58 < p ng-show ="myForm.address.$invalid && myForm.address.$dirty" > 请填写地址 </ p >
59 < p ng-show ="myForm.email.$invalid && myForm.email.$dirty" > 请填写正确邮箱 </ p >
60 < p ng-show ="showAllErr" > 请填写 </ p >
61 </ div >
62 < div class ="form-group" >
63 < div class ="col-xs-12" >
64 < input class ="btn btn-success" type ="submit" style ="width:100%" ng-click ="check()" >
65 </ div >
66 </ div >
67 </ form >
68 </ div >
69 </ div >
70
71 </ div >
72 < script src ="angular.min.js" ></ script >
73 </ body >
74 </ html >
如上页面布局代码，记得引入bootstrap.css;angular.js，ng-required;ng-pattern 功能等同于H5新属性：required; pattern, 另外还有disabled；readonly（ng-disbaled;ng-readonly）,本文后面会介绍其用法。
js代码：
1 var app = angular.module("myApp" , []);
2 app.controller("myCtr", function ($scope) {
3 $scope.data = {}; //存放用户输入的内容，便于后台调用
4 $scope.showAllErr = false ; //默认不显示提示信息
5 $scope.check = function (){
6 $scope.showAllErr= $scope.myForm.$invalid; //当内容不合法时，显示内容（此时$invalid=true），可以console.log($scope);找到$invalid,$dirty,$valid,$pristine
7 if ($scope.myForm.$valid){
8 console.log($scope.data); //控制台打印用户输入的内容
9 }
10 } 11 })
注意：
可以console.log($scope);找到$invalid,$dirty,$valid,$pristine(意思：不合法，被修改，合法，没被修改）
打开控制台，找到console.log($scope);打印的内容，找到表单name字段，即可找到以上四个属性，同样找到表单内输入框中的name字段也可找到以上四个属性。
在此之前，我们要为表单添加name字段，比如我设置为 name="myForm", 所以即可找 myForm 即可，input同样
下面是提示语部分，单独拿出来说一下：
1 <div class="col-xs-8 col-xs-offset-4 text-danger" style="height:30px;overflow:hidden;"> 2 <p ng-show="myForm.username.$invalid && myForm.username.$dirty">请填写用户名</p> 3 <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">请填写正确电话</p> 4 <p ng-show="myForm.address.$invalid && myForm.address.$dirty">请填写地址</p> 5 <p ng-show="myForm.email.$invalid && myForm.email.$dirty">请填写正确邮箱</p> 6 <p ng-show="showAllErr">请填写</p> 7 </div>
style="height:30px;overflow:hidden;">，设置只是显示一行；
ng-show="myForm.username.$invalid && myForm.username.$dirty"，默认状态下我们没有提交当然合法，而且也没有修改；又由于$scope.showAllErr = false;
所以什么提示语也不现实，但是当这些条件一旦满足，myForm.username.$invalid=true && myForm.username.$dirty=true,便会显示以上提示语中对应内容，至于
显示那一条，根据对应的字段显示，若是username，那就是“请填写用户名”，email字段,那就……（字段即 name="XXX",自己为不同的输入框定义不同字段即可，当然了
上面提到过他们也有： $invalid,$dirty,$valid,$pristine 这四个属性）
若是什么也不填写，那就是表单不合法，即 $scope.myForm.$invalid=true，提示 “请填写”。
再说说ng-disabled;ng-readonly:
将上述代码加入下面内容：
1 < div class ="col-xs-8" > 2 < input id ="address" type ="text" ng-model ="data.address" name ="address" ng-required ="true" ng-disabled ="isDis" > 3 < button ng-click ="myTogTwo()" > toggTwo </ button > 4 </ div >
1 < div class ="col-xs-8" >
2 < input id ="tel" type ="text" ng-model ="data.tel" name ="tel" ng-pattern ="/^1\d{10}$/" ng-required ="true" ng-readonly ="isWr" >
3 < button ng-click ="myTogOne()" > toggOne </ button >
4 </ div >
1 $scope.isDis = false ;
2 $scope.isWr = false ;
3 $scope.myTogOne = function (){
4 $scope.isWr = ! $scope.isWr;
5 }
6 $scope.myTogTwo = function (){
7 $scope.isDis = ! $scope.isDis;
8 }
便可以通过点击按钮实现输入框只读与可写、可用不可用之间的切换
补充两个事件：ng-change;ng-submit
ng-change:用来检测用户输入是否发生变化
ng-submit:用来检测表单提交事件，只可用于form元素（意只对表单本身有效）