Question

我有一个表单但是当我尝试验证复选框时我有一个问题，因为是不同的验证，一个验证是一个列表，你必须检查其中一个，然后在表单的末尾我有2个复选框更多的一个是隐私政策和其他如果你是16岁，但验证我已经检查了表格的所有复选框，并没有区分它是否来自列表或是否是另一个复选框

形式：

<form id="formDetails" name="formDetails" ng-submit="sendForm()">
    <div>
        <p><strong>Select areas of interest:*</strong></p>
    </div>
    <div class="col-xs-12 col-md-12">
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Children's</label>
        </div>
        <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
            <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Health & Beauty</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Science & Nature</label>
         </div>

         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Crafts & Hobbies</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">History</label>
         </div>
         <div class="form-group col-xs-12 col-sm-6 col-md-4 form-info">
             <label class="checkbox-inline"><input type="checkbox" id="topic" name="topic">Sports & Fitness</label>
          </div>
      </div>
      <div class="col-xs-12 col-md-12 policy">
          <div class="form-group col-xs-12 col-sm-6 col-md-12 form-info check-policy">
              <label class="checkbox-inline">
                  <input type="checkbox" ng-model="age" id="age" name="age">I can confirm I am over 16 years of age
                  <span class="error" ng-show="error">Please confirm you are over 16</span>
              </label>

          </div>
          <div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
              <label class="checkbox-inline">
                  <input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
                  <span class="error" ng-show="error">Please agree to the terms of the Privacy Policy</span>
              </label>
           </div>
       </div>
       <div>
           <button type="submit" class="btn btn-danger">Sign Up</button>
       </div>
   </form>

JS

var app = angular.module('formApp', []);
    app.controller('formCtrl', function ($scope) {

    $scope.error = false; 

    $scope.sendForm = function()
    {
        if($("#formDetails input[id=topic]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }

        if($("#formDetails input[id=age]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }

        if($("#formDetails input[id=terms]:checked").length > 0) {
            $scope.error = false; 
        }
        else{
            $scope.error = true; 
        }
    }
});

一开始我尝试使用input[type=checkbox]:checked执行此操作，但是这样就验证了表单中的所有复选框。

如果id="topic"进行一次验证，id="age"另一次验证，id="term"是另一种验证，如果{{1}}是另一种验证，如果没有选中则显示该消息，我该如何进行验证。

Answer 1

你现在正在使用angularjs所以请停止在jquery中思考。这里没有必要使用jquery。布尔值位于您在html元素上定义的模型中，如：

ng-model="age"

因此，您可以使用以下方法访问复选框年龄的布尔值：

$scope.age

如果要使用多个错误消息，可以使用对象而不是布尔值，如：

if($scope.age == true) {
    $scope.error.age = true; 
}else{
    $scope.error.age = false
}

或者您只是在ng-show

中使用该模型

<div class="form-group col-xs-12 col-sm-6 col-md-12 form-info">
  <label class="checkbox-inline">
      <input type="checkbox" ng-model="terms" id="terms" name="terms">I agree to the terms of the Privacy Policy
      <span class="error" ng-show="terms">Please agree to the terms of the Privacy Policy</span>
  </label>
</div>

Answer 2

试试这个。希望它会对你有所帮助。

ng-submit="sendForm(formDetails.$valid)"
$scope.sendForm = function()
    {
        if (!status) {
            return false;
        }else{
           //code here
        }
    }

使用AngularJS的验证复选框

2 个答案: