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是输入字段的名称，$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匹配之前它是{{1}}。如您所知，在提交表单之前验证表单以获得更好的用户体验

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将为true。然后，使用指令ng-disabled，您可以禁用该按钮。

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

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

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

3 个答案: