如果输入了太多数字，我如何保持AngularJS中使用ng模式验证的已验证屏蔽美国电话号码无效

How Do I Keep A Validated Masked US Phone Number Validated With ng-pattern in AngularJS From Invalidating If Too Many Digits Are Entered

本文关键字：验证 模式 ng 无效 电话号码 美国 屏蔽 数字 太多 输入 AngularJS      更新时间：2023-09-26

我试图找到一种方法来验证一个被屏蔽以显示美国电话号码为(###) ###-####的输入。我尝试了一些方法，我发现最接近的方法是使用

<form name="phone_form" novalidate>
    <input name="phone" class="phone_us" type="tel" ng-model="phone" placeholder="(555) 555-1212" ng-pattern="/^'(?('d{3})')?[ .-]?('d{3})[ .-]?('d{4})$/" />
    <span style="color:red" ng-show="phone_form.phone.$error.pattern">Invalid Phone Number</span>
</form>

我从Angularjs dynamic ng模式验证中提取了regex。这成功地验证了输入并匹配了用例，它甚至抛出了正确的错误并显示了正确的消息。但是，一旦您输入电话号码10位以外的任何数字，就会触发错误，并且输入再次无效。如果我退格一个数字并再次添加一个数字，那么只要我不再添加任何数字，输入就会再次验证。该字段被屏蔽，这样您就看不到显示的电话号码之外的任何额外数字，即使您试图输入超过有效电话号码的10位数字，要成功重新验证表单，您所要做的就是退格一位并再次输入。

我试过一些最大长度和最小长度或max="#"等的变化，但我想不通。

我正在使用Angular 1.5.7

我现在的位置可以在这里找到：

http://plnkr.co/edit/Ln7SciLSpnLJRZdA0P2N?p=preview

我建议您使用ngMask模块。。看看下面使用起来有多简单：

angular.module('app', ['ngMask'])
 .controller('mainCtrl', function($scope) {
   
 });
<html ng-app="app">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ngMask/3.1.1/ngMask.min.js"></script>
</head>
<body ng-controller="mainCtrl">
  <form name="phone_form" novalidate>
    <input type="text" name="text" class="phone_us" ng-model="phone" placeholder="(555) 555-1212" mask="(999) 999-9999" restrict="reject">
  </form>
</body>
</html>

相关文章：