本文示例用angularjs對form表單做輸入驗證，當所有值都輸入正確時，則註冊按鈕可用。
頁面：
html:
使用者名稱 使用者名稱必須以英文本母開始
使用者名稱長度不能小於5位
使用者名稱長度不能超過10位
密碼密碼長度不能超過10位
密碼長度不能小於5位
確認密碼
密碼和確認密碼不一致
手機號手機號格式不正確
郵箱郵箱長度不能超過30位
郵箱格式不正確
部落格**
部落格**格式不正確
年齡=3的兩位數字)">
年齡不能超過2位數
年齡不能小於3
性別男
女
愛好}
出生地請輸入偶數
數字必須是偶數
個人介紹
註冊重置
//自定義過濾器 用於省市區下拉框的聯動
.filter('cityfilter',function()
});return filterdata;}})
//自定義表單錯誤驗證 指令even
.directive('even',function()else
console.log('view到model');
return viewvalue;
});//$formatters model到view要執行的函式陣列
ngmodelcontroller.$formatters.push(function(modelvalue));}}
})//自定義表單控制項 指令custom-text-area
.directive('customtextarea',function());
});ngmodelcontroller.$render=function()}}
}).controller('myctrl',['$scope',function($scope),,,
,,,,
,,,,
,];this.findparentid=function(id)
});return parentid;
};$scope.hobbies=[,,
];//表單中預設的使用者資料
$scope.data=;
//先保留乙份預設值
$scope.origdata=angular.copy($scope.data);
//重置事件
$scope.reset=function();
//顯示省市區
this.initcity=function();
//網頁剛剛開啟執行
this.initcity.call(this);
//選擇/取消愛好多選框 改變對應的model
$scope.togglehobbyselection=function(hobbyid)else
if(index === -1)else
console.log($scope.data.hobbies);
};}]);
表單輸入不正確時：
全部輸入正確時：
知識點：
（表單 表單的元素 表單的屬性）
表單 標籤名 1 form 表單 action 路徑 method 提交方式 2 method 提交方式 get提交 在路徑後面加引數 顯示的是 name 123 age 123 注意 鍵中不要加空格，加空格後所顯示的就不是想要的數值了 name 123 age 123 name 123 age 1...
寬度 表單 Form表單
塊級元素和行內元素 1.塊級元素獨佔一行，行內元素在同一行顯示 2.塊級元素預設寬度為100 行內元素由內容撐開 3.塊級元素可以設定寬高，行內元素不可以設定寬高 4.塊級元素可以設定margin和padding和四個方向，行內元素只可以設定margin和padding和左右值，上下不起作用 5.塊...
表單項 內聯表單
form class form inline div class form group label for exampleinputname2 name label input type text class form control id exampleinputname2 placeholder...