电子邮件和手机号码验证在同一html5文本框与按钮

Email and mobile number validation on same html5 textbox with button

本文关键字：文本 html5 按钮 手机号码 验证 电子邮件      更新时间：2023-09-26

我想使用单个文本框验证电子邮件，手机号码。

我尝试了很多方法，但没有奏效。 我想验证它是JavaScript，HTML5，jQuery，AngularJS不是问题。

请帮我解决这个问题。 提前感谢

http://jsfiddle.net/ANxmv/3582/

<form name="form" ng-app="app" ng-controller="Ctrl" >
<div class="control-group" ng-class="{true: 'error'}[submitted && form.email.$invalid]">
        <label class="control-label" for="email">Your email address/Mobile number</label>
        <div class="controls">
            <input type="email"  name="email" ng-model="email" required />
        </div>
    </div>
    <button type="submit" class="btn btn-primary btn-large" ng-click="submitted=true">Submit</button>
</form>

这是一个简单的JavaScript代码，它将验证电子邮件和电话号码。

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function ValidateEmail(mail)   
{  
var mailformat = /^'w+(['.-]?'w+)*@'w+(['.-]?'w+)*('.'w{2,3})+$/;  
// if (/^'w+(['.-]?'w+)*@'w+(['.-]?'w+)*('.'w{2,3})+$/.test(myForm.emailAddr.value))  
if(mail.match(mailformat))
  {  alert(mail);
    return (true)  
  }  
    alert("You have entered an invalid email address!")  
    return (false)  
}  
function validate()
{
var data=document.getElementById("email").value;
checkNumberorEmail();
}
function phonenumber(inputtxt)  
{  
  var phoneno = /^'d{10}$/;  
  if((inputtxt.match(phoneno)))  
        {  
        alert(inputtxt);
      return true;  
        }  
      else  
        {  
        alert("enter 10 digit number");  
        return false;  
        }  
}  

function checkNumberorEmail()
{
  var data=document.getElementById("email").value;
  if (isNaN(data)) 
  {
    ValidateEmail(data)   ;
  }
  else{
  phonenumber(data) 
  }
}
</script>
</head>
<body>
<form >
<input type="text" name="email" id="email">
<input type="button" onclick="validate()">
</form>
</body>
</html>

小提琴

方法本身并不好。但这里有一个角度js中可能的简单函数

.HTML 

<form name="form" ng-app="app" ng-controller="Ctrl" >
 <div class="control-group" ng-class="{invalidClass: 'error'}[submitted && form.email.$invalid]">
    <label class="control-label" for="email">Your email address/Mobile number</label>
    <div class="controls">
        <input type="text"  name="email" ng-model="email" required />
    </div>
 </div>
<button type="submit" class="btn btn-primary btn-large" ng-click="submitForm()">Submit</button></form>

控制器

$scope.submitForm = function(){
 if(validateEmail($scope.email) || validateMobile($scope.email)){
// The nput is email or mobile
}
else{
  //both are not valid
  console.log("Invalid inputs");
  $scope.invalidClass = true;
 }
}
 function validateEmail(email) {
    var re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
  }
function validateMobile(email) {
    var re = /^'d{10}$/;
  return re.test(email);
}
相关文章：