關於利用angularjs+bootstrap進行表單校驗

1. 表單校驗的效果

2. 具體的實現過程

2.1 導入bootstrap的樣式和JS

注意：導入的bootstrap版本必須是3.x版本之後。
這點經過本人試驗，低版本時，按鈕的禁用效果是不會出現 那個禁用標記的

導入bootstrap的css和js，及angularjs文件

<link rel="stylesheet" href="../../assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script type="text/javascript" src="../../assets/jquery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../../assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../assets/angularjs/angular.min.js"></script>

2.2 form表單上添加name屬性

<form name="form">
	<select required class="form-control" ng-model="entity.parentId" ng-options="item.id as item.menuName for item in parentMenuList">
       <option value="">-- 頂級菜單 --</option>
     </select>
     <input class="form-control" required ng-model="entity.menuName" placeholder="請填寫菜單名稱">
     <input class="form-control" required ng-model="entity.menuUrl" placeholder="請填寫菜單鏈接">
     <button class="btn btn-success" type="button" ng-click="save()" ng-disabled="form.$invalid">保存</button>
</form>

注意：
1. form表單的name屬性必須與 表單中的按鈕 ng-disabled屬性值中的名稱相同
即： <form name="form"> -------->disabled="form.$invalid"
2. 表單中，需要校驗必填的項，只需添加一個 required 即可。