使用Bootstrap与AngularJS实现多组复选框必填的表单验证

我来帮你搞定这个表单验证需求！咱们的目标是：用户必须从两组独立的复选框中各选至少一个选项，才能启用提交按钮并完成表单提交。下面是完整的实现方案和代码示例：

核心实现思路 #

• 利用AngularJS的双向数据绑定，把每组复选框的选中状态绑定到对应的数组，数组会自动记录选中的选项
• 通过判断两个数组的长度是否都大于0，来控制提交按钮的禁用状态
• 结合Bootstrap的表单样式，动态展示验证错误提示，提升用户体验

完整代码示例 #

HTML 部分 #

<!DOCTYPE html>
<html ng-app="checkboxApp">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="CheckboxCtrl">
  <div class="container">
    <h3>多组复选框验证示例</h3>
    <form name="eltForm" novalidate class="form-horizontal">
      <!-- 第一组复选框：颜色选项 -->
      <div class="form-group" ng-class="{'has-error': colorSelections.length === 0 && eltForm.$submitted}">
        <label class="col-sm-2 control-label">颜色组</label>
        <div class="col-sm-10">
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="colorSelections" ng-value="'RED'"> RED
          </label>
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="colorSelections" ng-value="'BLUE'"> BLUE
          </label>
          <p class="help-block" ng-show="colorSelections.length === 0 && eltForm.$submitted">请至少选择一个颜色</p>
        </div>
      </div>

      <!-- 第二组复选框：设备选项 -->
      <div class="form-group" ng-class="{'has-error': deviceSelections.length === 0 && eltForm.$submitted}">
        <label class="col-sm-2 control-label">设备组</label>
        <div class="col-sm-10">
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="deviceSelections" ng-value="'Mac1'"> Mac1
          </label>
          <label class="checkbox-inline">
            <input type="checkbox" ng-model="deviceSelections" ng-value="'Mac2'"> Mac2
          </label>
          <p class="help-block" ng-show="deviceSelections.length === 0 && eltForm.$submitted">请至少选择一个设备</p>
        </div>
      </div>

      <!-- 提交按钮 -->
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary" 
                  ng-disabled="colorSelections.length === 0 || deviceSelections.length === 0"
                  ng-click="submitForm()">
            SubmitValue
          </button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

AngularJS 控制器部分 #

angular.module('checkboxApp', [])
.controller('CheckboxCtrl', function($scope) {
  // 初始化两个数组，用于存储每组选中的选项
  $scope.colorSelections = [];
  $scope.deviceSelections = [];

  // 表单提交逻辑
  $scope.submitForm = function() {
    if ($scope.colorSelections.length > 0 && $scope.deviceSelections.length > 0) {
      // 这里写提交数据的逻辑，比如发送请求到后端
      console.log('提交的数据：', {
        colors: $scope.colorSelections,
        devices: $scope.deviceSelections
      });
      alert('表单提交成功！');
    }
  };
});

关键细节解释 #

1. 复选框绑定：每组复选框的ng-model绑定到同一个数组，AngularJS会自动将选中的ng-value值添加到数组中，取消选中时自动移除
2. 按钮禁用控制：提交按钮的ng-disabled直接判断两个数组的长度，只要有一组没选（长度为0），按钮就保持禁用状态
3. 错误提示样式：利用Bootstrap的has-error类，结合ng-class在表单提交后给未选择的组添加错误样式，同时显示对应的帮助提示文本
4. 表单提交安全：即使用户通过控制台手动启用按钮，提交函数里也会再次验证两组是否都有选中项，确保数据合法性

内容的提问来源于stack exchange，提问作者user8373379