表格确认 - 电子邮件/电话号码

时间:2012-11-29 15:23:31

标签: javascript html validation

我遇到验证功能的问题,我只在一个函数中创建它,我想添加电子邮件验证,如@和数字1-9。我该如何添加它?

HTML:

<form onsubmit="return validate();" name="formValidation">
    <label>First Name:</label>
    <input type="text" name="firstName" /><br /><br />
    <label>Last Name:</label>
    <input type="text" name="lastName" /><br /><br />
    <label>E_mail:</label>
    <input type="text" name="Email" /><br /><br />
    <label>Confirm E_mail:</label>
    <input type="text" name="confirmEmail" /><br /><br />
    <label>Address:</label>
    <input type="text" name="Address" /><br /><br />
    <label>Telephone nr:</label>
    <input type="text" name="telephoneNr" /><br /><br />
    <br />
    <p>submit your form: </p><input type="submit" value="Submit" />
</form>

JS:

function validate(){
    if(document.formValidation.firstName.value == "" ||
    document.formValidation.lastName.value == "" ||
    document.formValidation.Email.value == "" ||
    document.formValidation.confirmEmail.value == "" ||
    document.formValidation.Address.value == "" ||
    document.formValidation.telephoneNr.value == "")
    {
        alert("Please fill all the boxes before submitting!");
        return false;
    } else {
        alert('Your form has been submitted!');
    }

}

4 个答案:

答案 0 :(得分:2)

来自http://www.w3resource.com/javascript/form/email-validation.php

此功能将使用javascript验证电子邮件:

function ValidateEmail(mail)   
{  
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))  
  {  
    return (true)  
  }  
    alert("You have entered an invalid email address!")  
    return (false)  
}  

验证电话号码:

function validatePhone(phone) {
    var error = "";
    var stripped = phone.replace(/[\(\)\.\-\ ]/g, '');

   if (stripped == "") {
        error = "You didn't enter a phone number.";
    } else if (isNaN(parseInt(stripped))) {
        phone = "";
        error = "The phone number contains illegal characters.";

    } else if (!(stripped.length == 10)) {
        phone = "";
        error = "The phone number is the wrong length. Make sure you included an area code.\n";
    }
}

答案 1 :(得分:1)

您想使用正则表达式。有很多问题已经描述了如何做到这一点:

https://stackoverflow.com/search?q=javascript+regex+phone+number+email

答案 2 :(得分:0)

我可以给你一个我用过的示例函数。它并不完美,但只需极少的编辑就可以快速轻松地在您的环境中进行设置:

function mail_check(){
var email   = document.getElementById(\'email\').value;
var email_check = email.split("@");
if (email_check[1]){var email_check2 = email_check[1].split(".");}
if (!email_check[1] || !email_check2[0] || !email_check2[1]) {
document.getElementById(\'mail_status\').innerHTML = "<font color=red>Invalid Email address!</font>";
return false;}
else if (email_check[1] && email_check2[0] && email_check2[1]) {
document.getElementById(\'mail_status\').innerHTML = "<font color=green>Valid Email address!</font>";
return true;}
}

我猜很明显我有一个空的span元素,它会被OnKeyUp js事件改变(基本上onkeyup调用函数,这会产生系统检查的错觉......虽然它确实如此,所以我猜它不是毕竟是一种错觉 - 哈!)

希望有所帮助。如果您需要进一步的帮助,请告诉我们!

干杯!

答案 3 :(得分:0)

这是一个非常常见的任务,你试图解决它的方式就像是2008年的一样,嘿,它几乎就是2013年)

第一次尝试查找regExp以这种方式解决它。

但是,为什么不在旧版/不支持的浏览器上使用HTML5 form validationModernizir进行回退。

你将获得所有现代浏览器的原生支持,这比JS更快,加上写得很好的js会以适当的方式关心它,因为那些人​​因为form validations而不支持。< / p>