Question

我正在编写一个文本框验证，实际上不允许用户输入一些无效的特殊字符。一旦用户输入无效的特殊字符，我就会抛出一个硬错误提示，我正在设置一个标志：

$scope.charAllowedText = false;

因此，如果输入框有任何无效值，则下一个按钮将被禁用。一旦用户删除无效字符，我只是将此标志更改为true。我的解决方案适用于单个文本框，但这不适用于多个文本输入。

在每个用户onClick上调用此验证：

$scope.validateUserInput = function(inputKey) {
  var count = 0;
  // inputKey = inputKey.replace(/[^a-zA-Z0-9 ]/g, "");
  $scope.imp = [];
  $scope.imp = Array.from(inputKey.replace(/[a-zA-Z0-9\s]/g, ''));
  var charInp = [];

  $scope.missingItems = [];
  $scope.imp.forEach(function(itemFromTarget) {
    var itemFound = false;
    for (var i in $rootScope.specialChar) {
      if (itemFromTarget === $rootScope.specialChar[i].value) {
        itemFound = true;
      }
    }

    if (!itemFound) {
      $scope.charAllowedText = false;
      $scope.missingItems.push(itemFromTarget);
    }
  });

  if (($scope.charAllowedText == false)) {
    $rootScope.charAllowedConfig = $scope.charAllowedText;
    $scope.header_class = 'modal-error-header';
    $scope.cancel_bttn = {
      txt: 'Ok',
      class: 'btn-default'
    };
    $scope.action_bttn = {};
    $modal({
      scope: $scope,
      templateUrl: 'flexi-modal.html',
      title: 'Error!',
      content: '<p class="alert alert-danger">You have entered the ' + $scope.missingItems[0] + ' character which is not supported. Please reenter a different character.</p>',
      html: true,
      show: true,
      animation: 'am-fade-and-scale',
      placement: 'center'
    });
  }
};

对于特定情况，如果我删除其中一个文本框中的无效字符而其他文本框仍然包含无效字符，则我的下一个按钮会启用，因为第一个文本框将标记值设置为true。

Answer 1

编写验证检查的正确方法应该是创建指令。这样做的原因是您希望将验证器保留为无状态。解决方法的问题是您使用相同的变量来检查输入是否有效。如果要保持代码相同，则更改函数并返回true或false，而不是将值设置为变量 $scope.charAllowedText

您可以使用Angular-validator。

来实现

另请查看此post。

多个文本框输入验证检查

1 个答案: