如何使用单一输入验证电子邮件或电话号码？
我喜欢输入值 xyz@gmail.com 或 1234567890 任何其他警报 "Invalid Email or phone number"
点赞 Facebook 注册表格
<form>
<input type="text" placeholder="Email or mobile number" />
<button type="submit" >Sign Up</button>
</form>
【问题讨论】：
标签： javascript
谢谢！！
我确实使用了两个正则表达式，例如
function validateEmail() {
var email = document.getElementById('txtEmail');
var mailFormat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|([0-9]{10})+$/;
if (email.value == "") {
alert( " Please enter your Email or Phone Number ");
}
else if (!mailFormat.test(email.value)) {
alert( " Email Address / Phone number is not valid, Please provide a valid Email or phone number ");
return false;
}
else {
alert(" Success ");
}
}
【讨论】：
我可能会用两个正则表达式对其进行测试。首先检查一个（例如它是否是有效的电子邮件），然后如果失败，请检查另一个（例如它是否是有效的电话号码）。如果两者都不是，则显示一条验证消息，说明该值无效。我不会在这里提供正则表达式示例，因为互联网上有几十个例子，每个都有优点和缺点 - 没有意义就电子邮件或电话的最佳正则表达式展开激烈的战争，但代码如下所示：
function validateEmailPhoneInput(field)
{
if (emailRegex.test(field.value))
{
//it's an email address
}
else if (phoneRegex.test(field.value))
{
//it's a phone number
}
else
{
//display your message or highlight your field or whatever.
field.classList.add('invalid');
}
}
【讨论】：
试试这个它的工作原理：
<script>
$(document).ready(function () {
$("#cuntryCode").hide();
$("#useridInput").on('input', function () {
var len = $("#useridInput").val().length;
if (len >= 2) {
var VAL = this.value;
var intRegex = /^[1-9][0-9]*([.][0-9]{2}|)$/;
if (!intRegex.test(VAL)) {
$('#error-caption').html('Invalid email. Please check spelling.');
$('#error-caption').css('color', 'red');
$("#cuntryCode").hide();
} else {
if(len < 10){
$('#error-caption').html('Invalid mobile number. Please try again.');
$('#error-caption').css('color', 'red');
$("#cuntryCode").show();
}else{
$('#error-caption').html('Invalid mobile number. length must be 10 digit.');
$('#error-caption').css('color', 'red');
}
}
}else{
$("#cuntryCode").hide();
$('#error-caption').html('');
}
});
});
</script>
<form class="push--top-small forward" method="POST" data-reactid="15">
<h4 id="input-title" data-reactid="16">Welcome back
</h4>
<label class="label" id="input-label" for="useridInput" data-reactid="17">Sign in with your email address or mobile number.
</label>
<div style="margin-bottom:24px;" data-reactid="18">
<div >
<div id="cuntryCode" class="_style_4kEO6r" style="float: left; height: 44px; line-height: 44px;">
<div tabindex="0" > +241
</div>
</div>
<div style="display:flex;">
<input id="useridInput" autocorrect="off" autocapitalize="off" name="textInputValue" class="text-input" placeholder="Email or mobile number" aria-required="true" aria-invalid="false" aria-describedby="error-caption input-title">
</div>
</div>
<div id="error-caption">
</div>
</div>
<button class="btn btn--arrow btn--full" data-reactid="24">
<span class="push-small--right" data-reactid="25">Next
</span>
</button>
</form>
【讨论】：
$("#volunteer_submit").click(function myfunction() {
function email_number_check() {
var email_number = $("input[name=email_mobile]").val();
if (email_number == "") {
alert("Fill in the Required Fields field cannot be empty");
}
else if (isNaN(email_number) == true) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(email_number) == false) {
alert('Invalid Email Address');
}
else {
$("#contact-form").submit();
}
}
else if (isNaN(email_number) == false) {
var reg_mobile = /^(\+\d{1,3}[- ]?)?\d{10}$/;
if (reg_mobile.test(email_number) == false) {
alert('Invalid mobile');
}
else {
$("#contact-form").submit();
}
}
}
email_number_check();
});
【讨论】：
This code is worked for me.
var a=document.getElementById('txtEmail').value;
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(a=="")
{
alert('Please enter value');
return false;
}
else if(isNaN(a))
{
if(!(a.match(mailformat)))
{
alert('Please enter email address/phno valid');
return false;
}
}
else
{
if(a.length()!=10)
{
alert('Please enter valid phno');
return false;
}
}
【讨论】：