先上效果页面：
其中几个知识点
1、angularJs提供了几个新的type类型：
type="password" type="email" type="number" type="url"
2、几个参数含义
ng-required //是否必填，true/false
ng-minlength //最小长度，数字
ng-maxlength //最大长度，数字
min //最小数字，数字，仅在type="number"下
max //最小数字，数字，仅在type="number"
3、几个form控制变量，先来一段代码
<form role="form" > <div > <label>用户名</label> <div> <input type="text" placeholder="请输入用户名"></div> </div> </form>
formName.inputFieldName.$pristine //字段是否未更改,对应上面的html代码即为 myform.username.$pristine formName.inputFieldName.$dirty //字段是否更改,对应上面的html代码即为 myform.username.$dirty formName.inputFieldName.$valid //字段有效,对应上面的html代码即为 myform.username.$valid formName.inputFieldName.$invalid //字段无效,对应上面的html代码即为 myform.username.$invalid formName.inputFieldName.$error //字段错误信息，使用频率比较高,对应上面的html代码即为 myform.username.$error
4、下面直接上代码，首先是html代码，使用了bootstrap.css样式，在结尾引入了angular
<!DOCTYPE html> <html> <head> <title>form验证</title> <link type="text/css" href="https://www.jb51.net/style/bootstrap.css"> </head> <body ng-app="formModule"> <div> <form role="form" ng-controller="formctrl"> <!-- 用户名 --> <div ng-class="{'has-error':myform.username.$dirty && myform.username.$invalid}"> <label>用户名</label> <div> <input type="text" ng-minlength="5" ng-maxlength="10" ng-required="true" ng-model="data.username" placeholder="请输入用户名"></div> <div ng-show="myform.username.$error.minlength">用户名必须大于5位</div> <div ng-show="myform.username.$error.maxlength">用户名必须小于于10位</div> </div> <!-- 密码 --> <div ng-class="{'has-error':myform.password.$dirty&&myform.password.$invalid}"> <label>密 码</label> <div> <input type="password" ng-minlength="10" ng-required="true" ng-model="data.password" placeholder="请输入密码"></div> <div ng-show="myform.password.$error.minlength">密码必须大于10位</div> </div> <!-- 确认密码 --> <div ng-class="{'has-error':myform.passwordconfirm.$dirty&&myform.passwordconfirm.$invalid}"> <label>确认密码</label> <div> <input type="password" ng-required="true" ng-model="data.passwordconfirm" placeholder="请输入确认密码"></div> <div ng-show="data.passwordconfirm!=data.password&&myform.password.$dirty&&myform.passwordconfirm.$dirty">两次密码不一致</div> </div> <!-- 邮箱 --> <div ng-class="{'has-error':myform.email.$dirty&&myform.email.$invalid}"> <label>邮 箱</label> <div> <input type="email" ng-required="true" ng-model="data.email" placeholder="请输入邮箱地址"></div> <div ng-show="myform.email.$error.email">请输入正确邮箱地址</div> </div> <!-- 博客 --> <div ng-class="{'has-error':myform.age.$dirty&&myform.age.$invalid}"> <label>年 龄</label> <div> <input type="number" ng-required="true" min="10" max="99" ng-model="data.age" placeholder="请输入您的年龄"></div> <div ng-show="myform.age.$error.min&&myform.age$error.max">请输入正确年龄</div> </div> <!-- 年龄 --> <div ng-class="{'has-error':myform.blog.$dirty&&myform.blog.$invalid}"> <label>博 客</label> <div> <input type="url" ng-required="true" ng-model="data.blog" placeholder="请输入博客地址"></div> <div ng-show="myform.blog.$error.url">请输入正确博客地址</div> </div> <!-- 性别 --> <div> <label>性 别</label> <div> <label> <input type="radio" value="1" ng-model="data.sex"> 男</label> <label> <input type="radio" value="2" ng-model="data.sex"> 女</label> </div> </div> <!-- 爱好 --> <div> <label>爱 好</label> <div> <label ng-repeat="hoppy in hoppies"> <input type="checkbox" ng-click="togglehoppy()" ng-model="hoppy.checked" >{{hoppy.name}} </label> </div> <div>{{data.Ahoppy.join('、')}}</div> </div> <!-- 地址 --> <div> <label>地 址</label> <div> <select ng-model="data.provinec" ng-options="x.id as x.name for x in cities | cityfilter:0"></select> </div> <div> <select ng-show="data.provinec" ng-model="data.area" ng-options="x.id as x.name for x in cities | cityfilter:data.provinec"></select> </div> <div> <select ng-show="data.area" ng-model="data.city" ng-options="x.id as x.name for x in cities | cityfilter:data.area"></select> </div> </div> </form> </div> <script src="https://www.jb51.net/js/angular.js"></script> <script src="https://www.jb51.net/js/app.js"></script> </body> </html>
下面为js代码（可能其中有些不妥之处，请指正，谢谢）