相信大家在做项目里经常需要登录注册，那么在用angularjs该如何实现。下面让我们通过angualr.js来实现注册系统表单验证。
Angular下载地址：https://code.angularjs.org/1.5.0/angular.js
首先看一下页面效果（通过bootstrap实现的布局样式）：
当我们点击提交按钮时，会根据表单验证，若通过，则没有提示语句，若不通过，则会弹出响应提示语句，当然该功能可以通过其他简单方式实现，这里只是通过实战对angular进一步深入理解。
实现方法如下：
页面布局代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> //设置按照edge浏览器渲染方式渲染 <meta content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> //设置页面宽度，缩放比例，用户不能缩放 <title>注册</title> <link href="https://www.jb51.net/bootstrap.min.css"> <style> input { outline: none; //去掉chrome浏览器输入框内的蓝色边框 } </style> </head> <body ng-app="myApp"> <div ng-controller="myCtr"> <div> <h2>注册系统</h2> <div> <form> <div> <div> <lable for="username">用户名：</lable> </div> <div> <input type="text" ng-model="data.username" ng-required="true"> //ng-required="true"是设置输入框内必须填写内容，下同 </div> </div> <div> <div> <lable for="tel">电话：</lable> </div> <div> <input type="text" ng-model="data.tel" ng-pattern="/^1\d{10}$/" ng-required="true"> //ng-pattren="/XXX/"是设置正则验证，下同 </div> </div> <div> <div> <lable for="address">地址：</lable> </div> <div> <input type="text" ng-model="data.address" ng-required="true"> </div> </div> <div> <div> <lable for="email">邮箱：</lable> </div> <div> <input type="text" ng-model="data.email" ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/" ng-required="true"> </div> </div> <div> <p ng-show="myForm.username.$invalid && myForm.username.$dirty">请填写用户名</p> <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">请填写正确电话</p> <p ng-show="myForm.address.$invalid && myForm.address.$dirty">请填写地址</p> <p ng-show="myForm.email.$invalid && myForm.email.$dirty">请填写正确邮箱</p> <p ng-show="showAllErr">请填写</p> </div> <div> <div> <input type="submit" ng-click="check()"> </div> </div> </form> </div> </div> </div> <script src="https://www.jb51.net/angular.min.js"></script> </body> </html>
如上页面布局代码，记得引入bootstrap.css;angular.js，ng-required;ng-pattern 功能等同于H5新属性：required; pattern, 另外还有disabled；readonly（ng-disbaled;ng-readonly）,本文后面会介绍其用法。
js代码：
var app = angular.module("myApp", []); app.controller("myCtr", function($scope) { $scope.data = {}; //存放用户输入的内容，便于后台调用 $scope.showAllErr = false; //默认不显示提示信息 $scope.check = function(){ $scope.showAllErr= $scope.myForm.$invalid; //当内容不合法时，显示内容（此时$invalid=true），可以console.log($scope);找到$invalid,$dirty,$valid,$pristine if($scope.myForm.$valid){ console.log($scope.data); //控制台打印用户输入的内容 } }11 })
注意：
可以console.log($scope);找到$invalid , $dirty , $valid , $pristine(意思：不合法，被修改，合法，没被修改）
打开控制台，找到console.log($scope);打印的内容，找到表单name字段，即可找到以上四个属性，同样找到表单内输入框中的name字段也可找到以上四个属性。
在此之前，我们要为表单添加name字段，比如我设置为 name="myForm" , 所以即可找 myForm 即可，input同样
下面是提示语部分，单独拿出来说一下：
<div> <p ng-show="myForm.username.$invalid && myForm.username.$dirty">请填写用户名</p> <p ng-show="myForm.tel.$invalid && myForm.tel.$dirty">请填写正确电话</p> <p ng-show="myForm.address.$invalid && myForm.address.$dirty">请填写地址</p> <p ng-show="myForm.email.$invalid && myForm.email.$dirty">请填写正确邮箱</p> <p ng-show="showAllErr">请填写</p> </div>
style="height:30px;overflow:hidden;"> ，设置只是显示一行；
ng-show="myForm.username.$invalid && myForm.username.$dirty" ，默认状态下我们没有提交当然合法，而且也没有修改；又由于$scope.showAllErr = false;