web-dev-qa-db-fra.com

AngularJS: validation de l'email ou du numéro de téléphone

Attente:

Je travaille sur le formulaire de connexion en angulaire. Les utilisateurs peuvent se connecter avec Email/Phone . Je dois valider l'e-mail/le téléphone dans une seule zone de texte.

Scénario en direct:

Facebook a mis en œuvre le même type de fonctionnalité dans la connexion. nous pouvons nous connecter à Facebook via Email/Phone . Mais selon la recherche, Facebook valide les données de l'utilisateur en effectuant des validations côté serveur et non des validations côté client.

Essayé jusqu'à présent: 

function validate() {
  var textBoxValue = document.getElementById('emailphone').value;
  var emailPattern = /^[a-z][a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9_]*)?@[a-z][a-zA-Z-0-9]*\.[a-z]+(\.[a-z]+)?$/; 
  if(textBoxValue == '') {
    alert('Please enter value');
    return false;
  } else if(isNaN(textBoxValue)) {
    if(!(textBoxValue.match(emailPattern))) {
      alert('Please enter valid email');
      return false;
    }
  } else {
    if(textBoxValue.length != 10) {
      alert('Please enter valid phno');
      return false;
    }
  }
}
<input type="text" name="emailphone" id="emailphone"/>
<input type="submit" value="Validate" onclick="validate()">

Je suis capable de réaliser cette fonctionnalité en utilisant du JavaScript pur, mais je souhaite l’implémenter dans Angular en utilisantng-patternou s’il existe une solution quelconque dans Angular.

J'ai trouvé ce message sur SO mais je ne travaille pas comme prévu .

Validation du courrier électronique ou du numéro de téléphone du même champ de texte dans angularjs

angularjsvalidationng-pattern
4
Rohit Jindal

Vous pouvez utiliser la validation de forme angulaire et la directive ng-pattern pour une utilisation en entrée ng-pattern="/^(?:\d{10}|\w+@\w+\.\w{2,3})$/"

Démo de travail

var app = angular.module("MY_APP", []);
app.controller("MyCtrl", function($scope) {
  $scope.submitted = false;
  $scope.submit = function(userData){
        console.log(userData)
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MY_APP">
  <div ng-controller="MyCtrl">
  <form name="userForm" novalidate ng-submit="userForm.$valid && submit(userData)">
              <div class="errorMsg" ng-show="submitted==true && userForm.$invalid">
                    <ul>
                        <li ng-show="submitted==true && userForm.emailphone.$error" class="errorMsg">
                            wrong format, It should be email or 10 digit mobile number
                        </li>
                    </ul>
                </div>
    <input type="text" name="emailphone" ng-model="userData.user" id="emailphone"  required
    ng-pattern="/^(?:\d{10}|\w+@\w+\.\w{2,3})$/" />
    <button type="submit" ng-click="submitted = true">Submit</button>
</form>
</div>
</div>
4
Saidulu Buchhala

Pour ce faire, nous pouvons utiliser NgFormControllers et validators pour valider un formulaire dans angularjs. Le code ci-dessous vous aide à saisir l'adresse e-mail ou le téléphone correct lors de la saisie et avant la soumission du formulaire. ng-if="form.emailphone.$error.pattern" dans ceci, form est le nom du formulaire et emailphone est le nom du champ de saisie et $error est le titulaire des validations ayant échoué. $error.pattern sera vrai jusqu'à ce que l'entrée corresponde à l'expression dans le ng-pattern

<form name="form">
     <input type="text" name="emailphone" ng-model="email" ng-pattern="/^([a-z][a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9_]*)?@[a-z][a-zA-Z-0-9]*\.[a-z]+(\.[a-z]+)?)|[7-9][0-9]{9}$/" >
     <span ng-if="form.emailphone.$error.pattern">Enter correct email or phone number!</span>
</form>

ng-model est obligatoire. Sinon, ça ne marchera pas. Parce que c'est undefined jusqu'à ce que pattern corresponde. Comme vous le savez, validez les formulaires avant de les soumettre pour une meilleure expérience utilisateur

1
Mr_Perfect

Vous pouvez utiliser des validateurs de forme angulaire parmi la directive ng-pattern.

<form name="userForm">
    <input type="text" name="emailphone" ng-model="userData.user" id="emailphone" ng-pattern="/(^[0-9]{10,10}$)|(^[a-z][a-zA-Z0-9_]*(\.[a-zA-Z][a-zA-Z0-9_]*)?@[a-z][a-zA-Z-0-9]*\.[a-z]+(\.[a-z]+))?$/" />
    <button type="submit" ng-disabled="userForm.$invalid" ng-click="validate()">Submit</button>
</form>

Une fois que vous avez nommé votre formulaire, vous pouvez utiliser ses validateurs. userForm.$invalid sera vrai au cas où il détecterait une entrée invalide dans le formulaire. Ensuite, avec la directive ng-disabled, vous pouvez désactiver le bouton.

Depuis que nous avons ajouté le ng-pattetrn, il sera vrai à moins que l'entrée ne corresponde à l'expression régulière ng-pattern.

Une autre chose à savoir est que la valeur de ng-model: userData.user sera indéfinie sauf si elle correspond à l'expression régulière

0
Manuel Obregozo