关于利用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 即可。