先上效果頁面：
其中幾個知識點
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" name="myform" > <div class="form-group" > <label class="col-sm-2">用戶名</label> <div class="col-sm-8"> <input type="text" name="username" class="form-control" placeholder="請輸入用戶名"></div> </div></form>
formName.inputFieldName.$pristine //字段是否未更改,對應上面的html代碼即為 myform.username.$pristineformName.inputFieldName.$dirty //字段是否更改,對應上面的html代碼即為 myform.username.$dirtyformName.inputFieldName.$valid //字段有效,對應上面的html代碼即為 myform.username.$validformName.inputFieldName.$invalid //字段無效,對應上面的html代碼即為 myform.username.$invalidformName.inputFieldName.$error //字段錯誤信息，使用頻率比較高,對應上面的html代碼即為 myform.username.$error
4、下面直接上代碼，首先是html代碼，使用了bootstrap.css樣式，在結尾引入了angular
<!DOCTYPE html><html><head> <title>form驗證</title> <link rel="stylesheet" type="text/css" href="style/bootstrap.css"></head><body ng-app="formModule"><div style="margin-top: 60px;"> <form role="form" name="myform" class="form-horizontal container" ng-controller="formctrl"> <!-- 用戶名 --> <div class="form-group" ng-class="{'has-error':myform.username.$dirty && myform.username.$invalid}"> <label class="col-sm-2">用戶名</label> <div class="col-sm-8"> <input type="text" name="username" ng-minlength="5" ng-maxlength="10" ng-required="true" ng-model="data.username" class="form-control" placeholder="請輸入用戶名"></div> <div class="col-sm-2 text-danger" ng-show="myform.username.$error.minlength">用戶名必須大于5位</div> <div class="col-sm-2" ng-show="myform.username.$error.maxlength">用戶名必須小于于10位</div> </div><!-- 密碼 --><div class="form-group" ng-class="{'has-error':myform.password.$dirty&&myform.password.$invalid}"> <label class="col-sm-2">密 碼</label> <div class="col-sm-8"> <input type="password" name="password" ng-minlength="10" ng-required="true" ng-model="data.password" class="form-control" placeholder="請輸入密碼"></div> <div class="col-sm-2 text-danger" ng-show="myform.password.$error.minlength">密碼必須大于10位</div> </div> <!-- 確認密碼 --> <div class="form-group" ng-class="{'has-error':myform.passwordconfirm.$dirty&&myform.passwordconfirm.$invalid}"> <label class="col-sm-2">確認密碼</label> <div class="col-sm-8"> <input type="password" name="passwordconfirm" ng-required="true" ng-model="data.passwordconfirm" class="form-control" placeholder="請輸入確認密碼"></div> <div class="col-sm-2 text-danger" ng-show="data.passwordconfirm!=data.password&&myform.password.$dirty&&myform.passwordconfirm.$dirty">兩次密碼不一致</div> </div> <!-- 郵箱 --> <div class="form-group" ng-class="{'has-error':myform.email.$dirty&&myform.email.$invalid}"> <label class="col-sm-2">郵 箱</label> <div class="col-sm-8"> <input type="email" name="email" ng-required="true" ng-model="data.email" class="form-control" placeholder="請輸入郵箱地址"></div> <div class="col-sm-2 text-danger" ng-show="myform.email.$error.email">請輸入正確郵箱地址</div> </div> <!-- 博客 --> <div class="form-group" ng-class="{'has-error':myform.age.$dirty&&myform.age.$invalid}"> <label class="col-sm-2">年 齡</label> <div class="col-sm-8"> <input type="number" name="age" ng-required="true" min="10" max="99" ng-model="data.age" class="form-control" placeholder="請輸入您的年齡"></div> <div class="col-sm-2 text-danger" ng-show="myform.age.$error.min&&myform.age$error.max">請輸入正確年齡</div> </div> <!-- 年齡 --> <div class="form-group" ng-class="{'has-error':myform.blog.$dirty&&myform.blog.$invalid}"> <label class="col-sm-2">博 客</label> <div class="col-sm-8"> <input type="url" name="blog" ng-required="true" ng-model="data.blog" class="form-control" placeholder="請輸入博客地址"></div> <div class="col-sm-2 text-danger" ng-show="myform.blog.$error.url">請輸入正確博客地址</div> </div> <!-- 性別 --> <div class="form-group"> <label class="col-sm-2">性 別</label> <div class="col-sm-8"> <label class="radio-inline"> <input type="radio" value="1" ng-model="data.sex" name="sex"> 男</label> <label class="radio-inline"> <input type="radio" value="2" ng-model="data.sex" name="sex"> 女</label> </div> </div> <!-- 愛好 --> <div class="form-group"> <label class="col-sm-2">愛 好</label> <div class="col-sm-8"> <label ng-repeat="hoppy in hoppies" class="checkbox-inline"> <input type="checkbox" name="hoppy[]" ng-click="togglehoppy()" ng-model="hoppy.checked" >{{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"> <select class="form-control" ng-model="data.provinec" ng-options="x.id as x.name for x in cities | cityfilter:0"></select> </div> <div class="col-sm-3"> <select class="form-control" 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 class="col-sm-3"> <select class="form-control" 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="js/angular.js"></script><script src="js/app.js"></script></body></html>下面為js代碼（可能其中有些不妥之處，請指正，謝謝）
(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)以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
