AngularJS: электронная почта или телефон проверка номер

Question

Expectation:

Я работаю на форме входа в Угловом. Пользователи могут зайти на сайт с помощью Электронная почта/Телефон. Мне нужно проверить электронную почту/телефон в текстовом поле.

Живая Сценарий:

Facebook реализован тот же тип функциональности в логине. мы можем зайти на Facebook через Email/Телефон. Но согласно исследованию Facebook проверяет данные пользователя, выполняя проверки на стороне сервера, а не проверки на стороне клиента.

Пробовал до сих пор:

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()">

Я могу достичь этой функциональности с помощью чистого JavaScript, но я хочу, чтобы реализовать его в Угловое использовании ng-pattern или если есть какие-либо работайте в Угловом.

Я нашел это сообщение на SO, но не работал согласно моему ожиданию.

Validation for email or phone number for same text field in angularjs

Answer 1

Вы можете использовать угловую директиву формы проверки и нг-шаблон для ввода использования ng-pattern="/^(?:\d{10}|\w+@\w+\.\w{2,3})$/"

Working Demo

var app = angular.module("MY_APP", []); 
 
app.controller("MyCtrl", function($scope) { 
 
    $scope.submitted = false; 
 
    $scope.submit = function(userData){ 
 
    \t 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>

Answer 2

Вы можете использовать угловые формы валидаторы среди директивы нг-шаблон.

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

Как только вы назовете вашу форму, вы сможете использовать валидаторы. userForm.$invalid будет правдой, если он обнаружит недопустимый ввод внутри формы. Затем с директивой ng-disabled вы можете отключить кнопку.

Поскольку мы добавили ng-pattetrn, оно будет истинным, если вход не соответствует регулярному выражению ng-pattern.

Другая вещь, чтобы знать, что значение нг-модели: userData.user будет неопределенным, если оно не соответствует регулярному выражению

Answer 3

сделать это, мы можем использовать NgFormControllers и validators для проверки формы в angularjs. Ниже кода вы можете ввести правильный адрес электронной почты или телефон во время ввода и перед отправкой формы. ng-if="form.emailphone.$error.pattern" в этом, form - это имя формы, и emailphone - это имя поля ввода, а $error является держателем неудачных валидаций. $error.pattern будет справедливо, пока входное напряжение не соответствует выражение в 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 является обязательным. Иначе это не сработает. Потому что это undefined до pattern. Как вы знаете, проверку формы перед отправкой их для лучшего пользовательского опыта