使用JavaScript验证电子邮件地址文本框

时间：2011-10-03 13:19:38

标签： javascript

我要求验证用户从文本框中退出时输入的电子邮件地址 我已经google了这个，但我得到了表单验证JScript;我不想要表单验证。我想要文本框验证 我写了下面的JScript，但“如果电子邮件无效，它不会返回同一页面。”

 function validate(email) {

            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            //var address = document.getElementById[email].value;
            if (reg.test(email) == false) 
            {
                alert('Invalid Email Address');
                return (false);
            }
 }

10 个答案:

答案 0 :(得分：47)

假设你的正则表达式是正确的：

在脚本标记内

function validateEmail(emailField){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
            alert('Invalid Email Address');
            return false;
        }

        return true;

}

在您的文字字段中：

<input type="text" onblur="validateEmail(this);" />

答案 1 :(得分：9)

这是一个相当古老的问题，所以我更新了这个答案，将HTML 5电子邮件类型考虑在内。

对于HTML 5，您根本不需要JavaScript;只需使用电子邮件输入类型：

<input type="email" />

  • 如果您想强制使用，可以添加必需的参数。

  • 如果您想添加额外的RegEx验证（例如，限制 @ foo.com 电子邮件地址），您可以使用模式参数，例如： 

    <input type="email" pattern=".+@foo.com" />

MozDev上提供了更多信息。


原始答案如下

首先 - 我推荐来自Hexillion的电子邮件验证程序RegEx：http://hexillion.com/samples/

它非常全面 - ：

^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$

我认为你想在JavaScript中使用一个函数：

function validateEmail(sEmail) {
  var reEmail = /^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!\.)){0,61}[a-zA-Z0-9]?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9\-](?!$)){0,61}[a-zA-Z0-9]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/;

  if(!sEmail.match(reEmail)) {
    alert("Invalid email address");
    return false;
  }

  return true;

}

在HTML输入中，您需要使用onblur触发事件 - 执行此操作的简单方法是简单地添加以下内容：

<input type="text" name="email" onblur="validateEmail(this.value);" />

当然，缺少一些健全性检查，不会进行域验证（必须在服务器端完成） - 但它应该为您提供一个非常可靠的JS电子邮件格式验证程序。

注意：我倾向于使用match()字符串方法而不是test() RegExp方法，但不应该产生任何差异。

答案 2 :(得分：1)

您是否也在验证服务器端？这非常重要。

使用正则表达式进行电子邮件不被视为最佳做法，因为几乎不可能正确封装电子邮件的所有标准。如果你必须使用正则表达式，我通常会走上类似的路线：

^.+@.+$

基本上检查你有一个包含@的值。然后，您可以通过向该地址发送电子邮件进行验证。

任何其他类型的正则表达式都意味着您有可能拒绝完全有效的电子邮件地址，除非我同意@Ben提供的答案。

答案 3 :(得分：1)

isEmailValid中的结果可用于测试电子邮件的语法是否有效。

var validEmailRegEx = /^[A-Z0-9_'%=+!`#~$*?^{}&|-]+([\.][A-Z0-9_'%=+!`#~$*?^{}&|-]+)*@[A-Z0-9-]+(\.[A-Z0-9-]+)+$/i
var isEmailValid = validEmailRegEx.test("Email To Test");

答案 4 :(得分：1)

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);
}

要验证上面代码中的javascript中的电子邮件ID。

答案 5 :(得分：1)

验证电子邮件是验证HTML表单时非常重要的一点。在此页面中，我们讨论了如何使用JavaScript验证电子邮件：

电子邮件是一个字符串（ASCII字符的一个子集），由@符号分成两部分。一个“ personal_info”和一个域，即personal_info @ domain。 personal_info部分的长度最多可以为64个字符，域名最多可以为253个字符。 personal_info部分包含以下ASCII字符。

  1. 大写（A-Z）和小写（a-z）英文字母。
  2. 数字（0-9）。
  3. 字符！ ＃$％＆'* +-/ =？ ^ _`{| }〜
  4. 字符。 （句号，点号或句号），前提是它不是第一个字符或最后一个字符，并且不会一个接一个地出现。

域名[例如com，org，net，in，us，info]部分包含字母，数字，连字符和点。

有效电子邮件ID的示例

mysite@ourearth.com

my.ownsite@ourearth.org

mysite@you.me.net

无效的电子邮件ID示例

mysite.ourearth.com [@不存在]

mysite @ .com.my [tld（顶级域）不能以点“。”开头。 ]

@ you.me.net [@之前没有字符]

mysite123@gmail.b [“ .b”不是有效的tld]

mysite @ .org.org [tld不能以点“。”开头。 ]

.mysite @ mysite.org [电子邮件不应以“。”开头。 ]

mysite（）* @ gmail.com [在这里，正则表达式仅允许 字符，数字，下划线和破折号]

mysite..1234 @ yahoo.com [不允许使用双点]

用于验证电子邮件ID的JavaScript代码 

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

https://www.w3resource.com/javascript/form/email-validation.php

答案 6 :(得分：0)

如果您希望允许重音（请参阅RFC 5322）并允许新的域名扩展名，例如.quebec。使用这个表达式：

/\b[a-zA-Z0-9\u00C0-\u017F._%+-]+@[a-zA-Z0-9\u00C0-\u017F.-]+\.[a-zA-Z]{2,}\b/
  • '\ u00C0- \ u017F'部分用于赋予重音。我们使用unicode范围。
  • '{2，}'简单地说域扩展名至少为2个字符。如果您不喜欢不定式范围，可以用'{2,63}'替换它。

Based on this article

JsFidler 

$(document).ready(function() {
var input = $('.input_field');
var result = $('.test_result');
        var regExpression = /\b[a-zA-Z0-9\u00C0-\u017F._%+-]+@[a-zA-Z0-9\u00C0-\u017F.-]+\.[a-zA-Z]{2,}\b/;
    
			$('.btnTest').click(function(){
          var isValid = regExpression.test(input.val());
          if (isValid)
              result.html('<span style="color:green;">This email is valid</span>');
           else
              result.html('<span style="color:red;">This email is not valid</span>');

			});

});
body {
    padding: 40px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}
.test_result {
  font-size:4em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="search_field">Input</label>
<input type='text' class='input_field' />
<button type="button" class="btnTest">
Test
</button>
<br/>
<div class="test_result">
Not Tested
</div>

答案 7 :(得分：0)

enter image description here 

<!DOCTYPE html>
    <html>
    <body>

    <h2>JavaScript Email Validation</h2>

    <input id="textEmail">

    <button type="button" onclick="myFunction()">Submit</button>

    <p id="demo" style="color: red;"></p>

    <script>
    function myFunction() {
        var email;

        email = document.getElementById("textEmail").value;

            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

            if (reg.test(textEmail.value) == false) 
            {
            document.getElementById("demo").style.color = "red";
                document.getElementById("demo").innerHTML ="Invalid EMail ->"+ email;
                alert('Invalid Email Address ->'+email);
                return false;
            } else{
            document.getElementById("demo").style.color = "DarkGreen";      
            document.getElementById("demo").innerHTML ="Valid Email ->"+email;
            }

       return true;
    }
    </script>

    </body>
    </html>

答案 8 :(得分：0)

您应在正则表达式下面使用已测试所有可能电子邮件组合的

     function validate(email) {
            var reg = "^[a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$";
            //var address = document.getElementById[email].value;
            if (reg.test(email) == false) 
            {
                alert('Invalid Email Address');
                return (false);
            }  
     }

奖金小费 如果您在Input标签中使用它，则可以直接在该标签中添加正则表达式 例子

<input type="text"  
       name="email" 
       class="form-control"
       placeholder="Email" 
       required 
       pattern="^[a-zA-Z0-9]+(\.[_a-zA-Z0-9]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,15})$"/>

上方，您可以看到两个属性必需和样式 在

必填，请确保其输入块中有@提交时间的数据 ＆
模式，请确保其输入的代码基于提交时的模式（正则表达式）进行验证

有关更多信息，您可以扔doc

答案 9 :(得分：-1)

    

<h2>JavaScript Email Validation</h2>

<input id="textEmail">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo" style="color: red;"></p>

<script>
function myFunction() {
    var email;

    email = document.getElementById("textEmail").value;

        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(textEmail.value) == false) 
        {
        document.getElementById("demo").style.color = "red";
            document.getElementById("demo").innerHTML ="Invalid EMail ->"+ email;
            alert('Invalid Email Address ->'+email);
            return false;
        } else{
        document.getElementById("demo").style.color = "DarkGreen";      
        document.getElementById("demo").innerHTML ="Valid Email ->"+email;
        }

   return true;
}
</script>
相关问题
最新问题