我试图找出一种方法来验证输入,该输入被掩盖以显示基于美国的电话号码为(###) ###-####我已经尝试了一些方法,但是发现的最接近的方法是使用

<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-pattern validation中提取了正则表达式-这成功地验证了输入并匹配了用例,甚至抛出了正确的错误并显示了正确的消息。但是,一旦输入电话号码的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>

10-08 03:43
查看更多