AngularJS : 电子邮件或 phone 号码验证

Question

期望：

我正在 Angular 中处理登录表单。用户可以使用 Email/Phone 登录。我需要在单个文本框中验证 Email/Phone。

现场场景：

Facebook 在登录中实现了相同类型的功能。我们可以通过 Email/Phone 登录 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 上找到了这个 post，但没有按照我的预期工作。

Answer 1

您可以在 ng-pattern 指令中使用 angular 表单验证器。

<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 正则表达式，否则它将为真。

另一件需要知道的事情是 ng-model 值：userData.user 将是未定义的，除非它匹配正则表达式

Answer 2

这样做，我们可以使用 NgFormControllers 和 validators 来验证 angularjs 中的表单。下面的代码可帮助您在键入时和提交表单之前输入正确的电子邮件或 phone。 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 匹配。如您所知，在提交表单之前验证表单以获得更好的用户体验

Answer 3

您可以使用 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>

AngularJS : 电子邮件或 phone 号码验证

AngularJS : email or phone number validation

validation

angularjs

ng-pattern