AngularJS：电子邮件或电话号码验证

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 实现此功能，但我想使用 ng-pattern 在 Angular 中实现它，或者如果在 Angular 中有任何解决方法。

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

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

Answer 1

您可以使用角度表单验证和 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>

Answer 2

这样做，我们可以使用NgFormControllers 和validators 在angularjs 中验证表单。下面的代码可帮助您在输入时和提交表单之前输入正确的电子邮件或电话。 ng-if="form.emailphone.$error.pattern" 在此，form 是表单的名称，emailphone 是输入字段的名称，$error 是验证失败的持有者。在输入与ng-pattern 中的表达式匹配之前，$error.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 是必填项。否则它将无法正常工作。因为在pattern 匹配之前它是undefined。 如您所知，在提交表单之前验证表单以获得更好的用户体验

Answer 3

您可以在 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>

一旦您为表单命名，您就可以使用其中的验证器。 userForm.$invalid 将在它检测到表单内的无效输入的情况下为真。然后，使用指令ng-disabled 您可以禁用该按钮。

由于我们添加了ng-pattetrn，除非输入匹配 ng-pattern 正则表达式，否则它将为 true。

另外需要知道的是，ng-model 的值：userData.user 除非与正则表达式匹配，否则将是未定义的