web-dev-qa-db-ja.com

angular jsを使用して電話番号を検証する

電話番号を1桁に設定したい場合、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>

しかし、検証エラーは発生しません。

javascriptangularjsangularjs-validation
12
Praveen M P

これを試して：

<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>
12
rwacarter

この答えを確認してください

基本的には、ニーズを満たすために正規表現を作成し、そのパターンを入力フィールドに割り当てることができます。

または、より直接的なアプローチの場合：

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

詳細情報@ angular docs here and here（ビルトインバリデーター）

7
Silver

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>
4
Sri

ng-patternを使用することもできますが、それがベストプラクティスになると思います。同様に、ng-messageを使用してみてください。次のhtmlのng-pattern属性をご覧ください。コードスニペットは部分的ですが、理解していただければ幸いです。

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>
2
SHAKU

ng-intl-tel-inputを使用して、すべての国の携帯電話番号を検証します。デフォルトの国も設定できます。 npmで： https://www.npmjs.com/package/ng-intl-tel-input

詳細： https://techpituwa.wordpress.com/2017/03/29/angular-js-phone-number-validation-with-ng-intl-tel-input/

2
Manoj Sanjeewa

私が見つけたさらにきれいでプロフェッショナルな外観は、AngularUI Maskを使用することです。実装が非常に簡単で、他の入力用にマスクをカスタマイズすることもできます。その後、必要なのは簡単な検証だけです。

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

1
Motoman
<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>
1
vinith

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 $

、より複雑な電話番号用

0
havelino
<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」はフォーム名です。

0
shaik shajahan