使用 $.each 进行表单验证

Posted 2023-05-09

【中文标题】使用 $.each 进行表单验证

【英文标题】：Form validation using $.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 是的，谢谢。

如果对您有帮助，请随时接受答案。

【参考方案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（尽管在更轻量级的版本中）也可以工作，并且足以满足您的代码。