AngularJS : email or phone number validation

Question

期待:

我正在 Angular 中处理登录表单。用户可以使用登录邮箱/电话 .我需要在单个文本框中验证电子邮件/电话。

现场场景:

Facebook 在登录时实现了相同类型的功能。我们可以通过登录Facebook邮箱/电话 .但根据研究，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 实现此功能，但我想使用 在 Angular 中实现它ng-pattern 或者如果在 Angular 中有任何解决办法。

我在 SO 上找到了这篇文章，但没有按我的预期工作 .

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

Answer 1

您可以使用 Angular 表单验证和 ng-pattern 指令进行输入
使用 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){
  	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>