angular实现form验证实例代码

 type="password" type="email" type="number" type="url" 

  <div class="form-group"> <label class="col-sm-2">用户名</label><div class="col-sm-8"> </div></div>

 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 

   <title>form验证</title> <div style="margin-top: 60px">  <!-- 用户名 --><div class="form-group"> <label class="col-sm-2">用户名</label><div class="col-sm-8"> </div><div class="col-sm-2 text-danger">用户名必须大于5位</div><div class="col-sm-2">用户名必须小于于10位</div></div><!-- 密码 --><div class="form-group"> <label class="col-sm-2">密 码</label><div class="col-sm-8"><p style="color:transparent">来源gao!daima.com搞$代!码网</p> </div><div class="col-sm-2 text-danger">密码必须大于10位</div></div><!-- 确认密码 --><div class="form-group"> <label class="col-sm-2">确认密码</label><div class="col-sm-8"> </div><div class="col-sm-2 text-danger">两次密码不一致</div></div><!-- 邮箱 --><div class="form-group"> <label class="col-sm-2">邮 箱</label><div class="col-sm-8"> </div><div class="col-sm-2 text-danger">请输入正确邮箱地址</div></div><!-- 博客 --><div class="form-group"> <label class="col-sm-2">年 龄</label><div class="col-sm-8"> </div><div class="col-sm-2 text-danger">请输入正确年龄</div></div><!-- 年龄 --><div class="form-group"> <label class="col-sm-2">博 客</label><div class="col-sm-8"> </div><div class="col-sm-2 text-danger">请输入正确博客地址</div></div><!-- 性别 --><div class="form-group"> <label class="col-sm-2">性 别</label><div class="col-sm-8"> <label class="radio-inline">  男</label><label class="radio-inline">  女</label></div></div><!-- 爱好 --><div class="form-group"> <label class="col-sm-2">爱 好</label><div class="col-sm-8"> <label class="checkbox-inline"> {{hoppy.name}} </label></div><div class="col-sm-2">{{data.Ahoppy.join('、')}}</div></div><!-- 地址 --><div class="form-group"> <label class="col-sm-2">地 址</label><div class="col-sm-3"> </div><div class="col-sm-3"> </div><div class="col-sm-3"> </div></div></div>

 (function(window) { 'use strict'; var mymodule = angular.module('formModule', []); // 城市删选器 mymodule.filter('cityfilter',function(){ return function(data,parent){ var cityData=[]; angular.forEach(data, function(item, key){ if(item.parent==parent){ cityData.push(item); } }); return cityData; } }); mymodule.controller('formctrl', ['$scope', function($scope) { // 设定初始状态 $scope.data={ Ahoppy:[1,3] } // 爱好对象 $scope.hoppies = [ {id: 1,name: '玩游戏',checked: istrue(1)}, {id: 2,name: '吃饭',checked: false}, {id: 3,name: '睡觉',checked: false}, {id: 4,name: '玩游戏',checked: true} ]; // 城市 $scope.cities=[ {name:'河南',parent:0,id:1}, {name:'郑州',parent:1,id:2}, {name:'郑东新区',parent:2,id:3}, {name:'金水区',parent:2,id:4}, {name:'二七区',parent:2,id:5}, {name:'信阳',parent:1,id:6}, {name:'商城',parent:6,id:7}, {name:'罗山',parent:6,id:8}, {name:'杭州',parent:0,id:9}, {name:'西湖区',parent:9,id:10}, {name:'余杭区',parent:9,id:11}, {name:'萧山区',parent:9,id:12}, {name:'上城区',parent:9,id:13}, ]; // 判断是否是选中状态 function istrue(id){ for(var i=0;i<$scope.data.Ahoppy.length;i++){ if($scope.data.Ahoppy[i]===id){ return true; } } return false; }; // 获取选中的爱好 $scope.togglehoppy = function() { $scope.data.Ahoppy = []; angular.forEach($scope.hoppies, function(item, key) { if (item.checked == true) { $scope.data.Ahoppy.push(item.id); } }); } }]) })(window)