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：電子郵件或電話號碼驗證

回答

相關問題