在具有按钮的相同html5文本框中验证电子邮件和手机号码

问题描述 投票:-5回答:2

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

我尝试了很多方法,但是没有用。我想验证它是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 jquery html5 validation
2个回答
0
投票

这里是简单的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>

FIDDLE


0
投票

该方法本身不好。但是这里是angular 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>

Controller

$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);
}
© www.soinside.com 2019 - 2024. All rights reserved.