Javascript 电子邮件和电话验证答案

【问题标题】：Javascript Email and Phone ValidationJavascript 电子邮件和电话验证
【发布时间】：2013-11-07 21:40:15
【问题描述】：

想用一个 javascript 函数验证 html 表单。我有表单验证，仅验证该字段是否为空。我想检查电子邮件是否正确以及电话号码是否为数字。现在表单打开弹出警报，但输入电子邮件后它会停止。

这是我的表单代码

<form name="appointment" method="post" onsubmit="return doValidate();">
      Name:*<br />
      <input type="text" name="requiredname" />
      Email:*<br />
        <input type="text" name="requiredemail" />
      Phone:*<br />
        <input type="text" name="requiredphone" />
      Appointment Date:*<br />
        <input type="text" name="requireddate" />

  Appointment Time:*<br />
            <input type="text" name="requiredtime" /><br /><br />
              <input name="submit" type="submit"  value="Book Now" />           </form>

这是 Javascript 代码：-

function doValidate()
{
if (document.appointment.requiredname.value =="")
{
alert("Please put your name");
document.appointment.requiredname.focus();
return false;
}
var readmail = document.appointment.requiredemail;
var checkatsymbol = readmail.indexof("@");
var checkdotsymbol = readmail.lastindexof(".");
if (readmail.value =="" || checkatsymbol<1)
{
alert("Please put the correct email address");
document.appointment.requiredemail.focus();
return false;
}
if (document.appointment.requiredphone.value =="" )
{
alert("Please put your phone");
document.appointment.requiredphone.focus();
return false;
}
if (document.appointment.requireddate.value =="" )
{
alert("Please put your appointment date as DD/MM/YYYY");
document.appointment.requireddate.focus();
return false;
}
if (document.appointment.requiredtime.value =="")
{
alert("Please put your appointment time as HH:MM AM/PM");
document.appointment.requiredtime.focus();
return false;
}
return ( true );
}

【问题讨论】：

验证电子邮件地址已经很好在 Stack Overflow 上进行了介绍。验证电话号码是一个杯子的游戏。人们希望将( 和) 和+ 和- 和. 和x（以及其他）放在他们的电话号码中。应付。

标签： javascript php html forms validation

【解决方案1】：

function validateEmail(email) { //Validates the email address
    var emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return emailRegex.test(email);
}

function validatePhone(phone) { //Validates the phone number
    var phoneRegex = /^(\+91-|\+91|0)?\d{10}$/; // Change this regex based on requirement
    return phoneRegex.test(phone);
}

function doValidate() {
   if (!validateEmail(document.appointment.requiredphone.value) || !validatePhone(document.appointment.requiredphone.value) ){
    alert("Invalid Email");
    return false;
}

此功能将帮助您验证电话和电子邮件地址

【讨论】：

你能告诉我如何在一次点击事件中添加 2 个功能。
是的，您的答案解决了问题，但尝试使代码模块化，这有助于您保持代码可维护性和易于调试。

【解决方案2】：

这是我写的，你可以看看

function doValidate()
    {
    if (document.appointment.requiredname.value =="")
    {
    alert("Please put your name");
    document.appointment.requiredname.focus();
    return false;
    }
    var readmail = document.appointment.requiredemail.value;
    var checkatsymbol = readmail.indexof("@");
    var checkdotsymbol = readmail.lastindexof(".");
    if (checkatsymbol < 1 || checkdotsymbol+2>=readmail.length )
    {
    alert("Please put the correct email address");
    document.appointment.requiredemail.focus();
    return false;
    }
    if (document.appointment.requiredphone.value =="" )
    {
    alert("Please put your phone");
    document.appointment.requiredphone.focus();
    return false;
    }
    if (document.appointment.requireddate.value =="" )
    {
    alert("Please put your appointment date as DD/MM/YYYY");
    document.appointment.requireddate.focus();
    return false;
    }
    if (document.appointment.requiredtime.value =="")
    {
    alert("Please put your appointment time as HH:MM AM/PM");
    document.appointment.requiredtime.focus();
    return false;
    }
    return ( true );
    }

【讨论】：

【解决方案3】：

在这里我找到了一些有用的链接，用于使用 Javascript 验证手机号码和电子邮件

手机号码验证

Mobile number Validation using Java Script - with Demo

<input id="txtPhoneNo" type="text" onkeypress="return isNumber(event)" />
<input type="button" value="Submit" onclick="ValidateNo();">

 <script type="text/javascript">

   function isNumber(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            alert("Please enter only Numbers.");
            return false;
        }

        return true;
    }

    function ValidateNo() {
        var phoneNo = document.getElementById('txtPhoneNo');

    if (phoneNo.value == "" || phoneNo.value == null) {
            alert("Please enter your Mobile No.");
            return false;
        }
        if (phoneNo.value.length < 10 || phoneNo.value.length > 10) {
            alert("Mobile No. is not valid, Please Enter 10 Digit Mobile No.");
            return false;
        }

        alert("Success ");
        return true;
        }
</script>

电子邮件验证

Email Validation using Java Script with Demo

 function validateEmail() {

        var email = document.getElementById('txtEmail');
        var mailFormat = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if (email.value == "") {
            alert( "  Please enter your Email Id  ");
        }
        else if (!mailFormat.test(email.value)) {
            alert( "  Email Address is not valid, Please provide a valid Email ");
            return false;
        }
        else {
            alert(" Success ");
        }

    }

【讨论】：

【解决方案4】：

伙计们，最后我有一个很好的正则表达式，用于使用单个输入字段验证电子邮件和电话号码。希望对你有帮助。

谢谢

^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|(^[0-9]{10})+$

演示：

https://jsfiddle.net/sanat/b2m436L5/18/

【讨论】：