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

我在角工作的登录表单上。用户可以登录电子邮件/电话。我需要在单个文本框中验证电子邮件/电话。

现场情景：

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_]*)[email protected][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中解决问题。

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

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

来源

2016-12-29 Rohit Jindal

https://codepen.io/rpdasilva/pen/DpbFf我最喜欢的手机指令。在你的情况下不完全适用，但它可能有助于看一看。 – StephanieQ

你在其他问题的答案中发现了“不是每个人的期望值”？因为这非常接近这个问题的完全重复。 –

@MikeMcCaughan验证不按我的预期工作。当我尝试键入字母表时，它向我显示错误的错误消息，该电话号码无效，因为我正在尝试输入电子邮件。 –

可以使用角度表单验证和NG模式指令输入使用ng-pattern="/^(?:\d{10}|\[email protected]\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}|\[email protected]\w+\.\w{2,3})$/" /> 
 
    <button type="submit" ng-click="submitted = true">Submit</button> 
 
</form> 
 
</div> 
 
</div>

来源

2017-04-12 11:07:13

你可以使用与NG模式指令中的角形式验证。

<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_]*)[email protected][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模式正则表达式匹配，否则它将成立。

知道的另一件事是，NG-模型值：userData.user是不确定的，除非它的正则表达式

来源

2016-12-29 19:24:32

我需要在单个文本框中验证电子邮件/电话不仅是电子邮件。 –

检查更新的答案 –

做这个比赛，我们可以使用NgFormControllers和validators在angularjs验证表单。下面的代码可以帮助您在提交表单前输入正确的电子邮件或电话。 ng-if="form.emailphone.$error.pattern"在此，form是表单的名称，emailphone是输入字段的名称，$error是失败验证的持有者。直到输入的表达式匹配在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_]*)[email protected][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是强制性$error.pattern将为真。否则它将无法工作。因为它是undefined，直到pattern匹配。如你所知，提交他们更好的用户体验之前验证表单

来源

2016-12-29 19:42:55

请再次阅读我的问题。我需要在单个文本框中验证电子邮件/电话不仅仅是电子邮件。 –

只需为两者编写正确的模式。而已。我也在回答中提到 –

您能否提供小提琴链接？在您的回答中，我只能发送验证邮件。它将如何与电话一起工作。 –

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

回答

相关问题