使用 Angular js 验证电话号码答案

【问题标题】：Validate phone number using angular js使用 Angular js 验证电话号码
【发布时间】：2015-03-15 04:31:30
【问题描述】：

想要将电话号码设置为 10 位，我该如何使用 Angular js 来做到这一点。

这是我尝试过的：

<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
  <div class="form-group" ng-class="{'has-error': registration.phone.$error.number}">
    <label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
    <div class="col-sm-9">
      <input type="number" 
             class="form-control" 
             ng-minlength="10" 
             ng-maxlength="10"  
             id="inputPhone" 
             name="phone" 
             placeholder="Phone" 
             ng-model="user.phone" 
             ng-required="true">
      <span class="help-block" 
            ng-show="registration.phone.$error.required && 
                     registration.phone.$error.number">
                     Valid phone number is required
      </span>
      <span class="help-block" 
            ng-show="((registration.password.$error.minlength || 
                      registration.password.$error.maxlength) && 
                      registration.phone.$dirty) ">
                      phone number should be 10 digits
       </span>
    </div>
  </div>
</form>

但我没有收到验证错误。

【问题讨论】：

国际电话号码呢？
您的ng-shows 正在寻找registration.phone，但您输入的ng-model 是user.phone
注册是表单名称我正在使用那个.. @rwacarter

标签： javascript angularjs angularjs-validation

【解决方案1】：

试试这个：

<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
    <div class="form-group" ng-class="{'has-error': registration.phone.$error.number}">
        <label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
        <div class="col-sm-9">
            <input type="number" 
                   class="form-control" 
                   ng-minlength="10" 
                   ng-maxlength="10"  
                   id="inputPhone" 
                   name="phone" 
                   placeholder="Phone" 
                   ng-model="user.phone"
                   ng-required="true">
            <span class="help-block" 
                  ng-show="registration.phone.$error.required || 
                           registration.phone.$error.number">
                           Valid phone number is required
            </span>
            <span class="help-block" 
                  ng-show="((registration.phone.$error.minlength ||
                           registration.phone.$error.maxlength) && 
                           registration.phone.$dirty) ">
                           phone number should be 10 digits
            </span>

【讨论】：

我不确定这是否是特定于浏览器的，但在 Chrome 中，此输入当前将在输入末尾显示一个微小的增量器/减量器。它有用于增加和减少数字的小箭头。
输入[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none;边距：0； }
请记住，如果数字以 0 开头，则零将被消除。

【解决方案2】：

Check this answer

基本上，您可以创建一个正则表达式来满足您的需求，然后将该模式分配给您的输入字段。

或者更直接的方法：

<input type="number" require ng-pattern="<your regex here>">

更多信息 @ angular docs here 和 here (built-in validators)

【讨论】：

【解决方案3】：

也可以使用 ng-pattern ,[7-9] => 手机号码必须以 7 或 8 或 9 开头 ,[0-9] = 手机号码接受数字 ,{9} 手机号码应为 10 位数字。

function form($scope){
    $scope.onSubmit = function(){
        alert("form submitted");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app ng-controller="form">
<form name="myForm" ng-submit="onSubmit()">
    <input type="number" ng-model="mobile_number" name="mobile_number" ng-pattern="/^[7-9][0-9]{9}$/" required>
    <span ng-show="myForm.mobile_number.$error.pattern">Please enter valid number!</span>
    <input type="submit" value="submit"/>
</form>
</div>

【讨论】：

这似乎不是一个非常国际化的规则......也许你可以知道这对哪个国家有效。
好的，我同意你的看法。我为印度国家/地区的手机号码验证编写了这段代码。谢谢。
ng-pattern="/^[7-9][0-9]{9}$/" 有什么用，那么如何在邮件验证中使用相同的方法？..
ng-pattern 用于编写我们自己的正则表达式，对于电子邮件验证，您可以使用此 [a-z0-9._%+-]+@[a-z0-9。 -]+\.[az]{2,3}.

【解决方案4】：

您也可以使用ng-pattern，我认为这将是最佳做法。同样尝试使用ng-message。请查看以下 html 中的 ng-pattern 属性。代码sn-p是部分的但希望你能理解。

angular.module('myApp', ['ngMessages']);
angular.module("myApp.controllers",[]).controller("registerCtrl", function($scope, Client) {
  $scope.ph_numbr = /^(\+?(\d{1}|\d{2}|\d{3})[- ]?)?\d{3}[- ]?\d{3}[- ]?\d{4}$/;
});

<form class="form-horizontal" role="form" method="post" name="registration" novalidate>
  <div class="form-group" ng-class="{ 'has-error' : (registration.phone.$invalid || registration.phone.$pristine)}">
    <label for="inputPhone" class="col-sm-3 control-label">Phone :</label>
    <div class="col-sm-9">
      <input type="number" class="form-control" ng-pattern="ph_numbr"  id="inputPhone" name="phone" placeholder="Phone" ng-model="user.phone" ng-required="true">
      <div class="help-block" ng-messages="registration.phone.$error">
        <p ng-message="required">Phone number is required.</p>
        <p ng-message="pattern">Phone number is invalid.</p>
      </div>
    </div>
  </div>
</form>

【讨论】：

【解决方案5】：

使用 ng-intl-tel-input 验证所有国家/地区的手机号码。您也可以设置默认国家/地区。在 npm 上：https://www.npmjs.com/package/ng-intl-tel-input

【讨论】：

这个库完美运行，唯一的缺点是它需要 jquery。

【解决方案6】：

我发现一个更干净、更专业的外观是使用 AngularUI Mask。实现起来非常简单，也可以为其他输入定制掩码。然后，您只需要一个简单的必需验证。

https://angular-ui.github.io/

【讨论】：

UI-Mask 很棒，除了...
@PKD，您可以添加 ui-options="{clearOnBlur: false}" 以禁用该行为，至少在 angular-ui-mask 的最新版本中是这样。

【解决方案7】：

<form name = "numberForm">
    <div>
    <input type="number"
           placeholder = "Enter your phonenumber"
           class = "formcontroll"
           name = "numbers"
           ng-minlength = "10"
           ng-maxlength = "10"
           ng-model="phno" required/>
           <p ng-show = "numberForm.numbers.$error.required ||
                       numberForm.numbers.$error.number">
                       Valid phone number is required</p>
            <p ng-show = "((numberForm.numbers.$error.minlength ||
                        numberForm.numbers.$error.maxlength)
                        && numberForm.numbers.$dirty)">
                        Phone number should be 10 digits</p><br><br>
       </div>
   </form>

【讨论】：

【解决方案8】：

使用 ng-pattern，在本例中，您可以验证一个包含 10 个数字的简单模式，当模式不匹配时，显示消息并禁用按钮。

 <form  name="phoneNumber">

        <label for="numCell" class="text-strong">Phone number</label>

        <input id="numCell" type="text" name="inputCelular"  ng-model="phoneNumber" 
            class="form-control" required  ng-pattern="/^[0-9]{10,10}$/"></input>
        <div class="alert-warning" ng-show="phoneNumber.inputCelular.$error.pattern">
            <p> write a phone number</p>
        </div>

    <button id="button"  class="btn btn-success" click-once ng-disabled="!phoneNumber.$valid" ng-click="callDigitaliza()">Buscar</button>

你也可以使用另一个复杂的模式，比如

^+?\d{1,3}?[- .]?(?(?:\d{2,3}))?[- .]?\d\d\d[- .]? \d\d\d\d$

，用于更复杂的电话号码

【讨论】：

【解决方案9】：

<div ng-class="{'has-error': userForm.mobileno.$error.pattern ,'has-success': userForm.mobileno.$valid}">

              <input type="text" name="mobileno" ng-model="mobileno" ng-pattern="/^[7-9][0-9]{9}$/"  required>

这里“userForm”是我的表单名称。

【讨论】：