使用 $.each 进行表单验证答案

【问题标题】：Form validation using $.each使用 $.each 进行表单验证
【发布时间】：2018-05-11 17:01:15
【问题描述】：

这是我的表单验证代码。此处alert("validation done") 应在验证每个输入后显示。但它为每个输入返回。这里有什么问题？

var app=angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.clickMe = function(){
debugger
   $form = $('#myForm');
        $form.find('div input.required').each(function () {debugger
            var $this = $(this)
            if ($this.val().trim() == '') {
                $(this).css('border', '1px solid red');
                return false;
            }
            return true;
        })
        
        alert("validation done")
}
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<form id="myForm" >
<div>
  <input type="text" class="required">
  <input type="date" class="required">
  <select class="required">
  <option>AAA</option>
  <option>BBB</option>
  </select>
</div>
</form>
<button ng-click="clickMe()">submit</button>
</div>

【问题讨论】：

浏览器控制台有错误吗？
@gurvinder372 号
代码根本没有运行。有一个错字$('#myFrom') 应该是$('#myForm')
@DrColossos 是的，谢谢。
如果对您有帮助，请随时接受答案。

标签： javascript jquery angularjs validation

【解决方案1】：

这里 alert("validation done") 应该在验证后显示每个输入。

这样的话

这个alert 应该在each 循环内
$('#myFrom'); 应改为 $('#myForm');
在if 中删除return false

演示

var app = angular.module('myApp', [])
app.controller('myController', function($scope) {
  $scope.clickMe = function() {
    $form = $('#myForm');
    var isValid = true;
    $form.find('div input.required').each(function() {
      var $this = $(this)
      if ($this.val().trim() == '') {
        $(this).css('border', '1px solid red');
        isValid = false;
      }
      if (isValid) {
        alert("validation done"); //notice the change in placement of this alert
      }
      return true;
    })
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <form id="myForm">
    <div>
      <input type="text" class="required">
      <input type="date" class="required">
      <select class="required">
  <option>AAA</option>
  <option>BBB</option>
  </select>
    </div>
  </form>
  <button ng-click="clickMe()">submit</button>
</div>

【讨论】：

当我在没有输入任何值的情况下点击submit。应该为每个输入添加边框吗？但这里只检查第一个输入。
我想在输入所有 3 个值后显示 alert(validation done)。
我可以在相同的条件下为selecr 编写验证吗？
是的，您需要将选择器更改为$form.find('div input.required, div select.required')

【解决方案2】：

有一个错字$('#myFrom') 应该是$('#myForm')。

您还可以使用内置的 angular.element() 函数，该函数无需 jQuery（尽管在更轻量级的版本中）也可以工作，并且足以满足您的代码。

【讨论】：