使用angular和jquery验证输入字段？

Question

我正在使用angular.js和jQuery来验证使用ng-repeat创建的表单中的用户输入。所以基本上我有一个字符串数组（条形码）我循环并显示，我还显示一个输入字段。用户将使用条形码扫描仪，将其视为复制/粘贴效果，将字符串输入到输入字段中。如果条形码与其旁边的字符串不匹配，则应提醒用户并清除输入字段。我有下面的代码使用ng-model-options'Blur'来执行此操作，它几乎可以正常工作。现在，每次输入不正确时，它会向用户发出三次警报。我无法弄清楚它为什么会发射三次？必须有一个更优雅的方式来实现angular / jQuery的验证？可能是一个指令？我是棱角分明的新人，所以非常感谢任何帮助，谢谢！

HTML：

<div ng-repeat="(index, val) in barcodes.barcodes track by $index">
  <div class="form-group row" ng-show="barcodes.barcodes[index]">
    <div ng-if="barcodes.barcodes[index] != 'X'">
      <label class="col-sm-3 form-control-label" style="margin-top:5px"> {{ barcodes.barcodes[index] }} </label>
      <label class="col-sm-2 form-control-label" style="margin-top:5px"> {{ barcodes.A_adaptors[$index+8] }} </label>
      <div class="col-sm-1" style="margin-top:5px">
        <button class="btn btn-xs btn-default hvr-pop" data-toggle="dropdown" ng-click="getIndex($index+8)"><i class="fa fa-cogs" aria-hidden="true" style="color:#DF3D42"></i></button>
          <ul class="dropdown-menu" role="menu">
             <div ng-repeat="x in barcodes.B_adaptors">
               <li class="text-center" ng-click="replace(x)" id="B_adaptors">{{ x }}</li>
             </div>
          </ul>
      </div>
      <div class="col-sm-6">
        <input type="text" class="form-control matching" ng-model-options="{ updateOn: 'blur' }" ng-model="item.barcodeInput" placeholder="Barcode" required>
        <div ng-show="!isEqualToBarcode($index+8, item.barcodeInput)"> Error: Barcode not the same! </div>
      </div>
    </div>
  </div>
</div>

JAVASCRIPT :(在控制器中）

$scope.isEqualToBarcode = function(index, val) {
    if(val === null || val === undefined) return true;

    if($scope.barcodes.A_adaptors[index] !== val.trim()) {
        console.log("wrong", val);
        alert("Incorrect Barcode, Try Again.");
        val = "";
    }

    return $scope.barcodes.A_adaptors[index] === val.trim();
}

Answer 1

一种方法是将其更改为角形。 Angular为无效输入提供输入验证和标志。 这是一个帮助您入门的链接 您也可以为它们定义自己的验证器指令。

https://docs.angularjs.org/guide/forms

Answer 2

因为ng-show期待一个布尔值，所以函数通常不会在ng-show中按预期工作。尝试将isEqualToBarcode函数放在ng-blur事件内的输入中。

据说更好的解决方案是使用角度输入/表单验证，我简要介绍了如何使用它here但你可能想看一下文档或教程你对它完全陌生。你想要的那种验证并不是开箱即用的角度，幸运的是other people have already created a custom directive to handle that。它用于确认密码，但基本功能仍然相同（匹配2个值）。这似乎是漫长的过程，但相信我，从长远来看，它将为您节省很多麻烦。