Проверить текстовое поле электронной почты с помощью JavaScript

У меня есть требование проверить адрес электронной почты, введенный, когда пользователь выходит из текстового поля.
У меня есть googled для этого, но я получил форму проверки 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);
            }
 }

Ответы

Ответ 1

Предполагая правильное правильное выражение:

внутри тэгов script

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);" />

Ответ 2

Это довольно старый вопрос, поэтому я обновил этот ответ, чтобы учесть тип электронной почты HTML 5.

Вам вообще не нужен JavaScript для этого с HTML 5; просто используйте тип ввода электронной почты:

<input type="email" />

  • Если вы хотите сделать это обязательным, вы можете добавить обязательный параметр.

  • Если вы хотите добавить дополнительную проверку RegEx (например, ограничение до адресов электронной почты @foo.com), вы можете использовать параметр pattern, например:

    <input type="email" pattern="[email protected]" />

Там больше информации доступно на МозДев.


Оригинальный ответ следует

Прежде всего - я бы порекомендовал валидатор электронной почты RegEx от Hexillion: http://hexillion.com/samples/

Это довольно всеобъемлющее -:

^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\'\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\'\{\|\}\~][email protected](?:(?:(?:[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\!\#\$\%\&\'\*\+\-\/\=\?\^\'\{\|\}\~][email protected](?:(?:(?:[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() вместо метода RegExp test() но это не должно иметь никакого значения.

Ответ 3

Вы также проверяете серверную сторону? Это очень важно.

Использование регулярных выражений для электронной почты не считается лучшей практикой, поскольку практически невозможно правильно инкапсулировать все стандарты, связанные с электронной почтой. Если вам нужно использовать регулярные выражения, я, как правило, иду по следующему маршруту:

^[email protected]+$

который в основном проверяет, что у вас есть значение, содержащее @. Затем вы вернетесь с подтверждением, отправив электронное письмо на этот адрес.

Любое другое регулярное выражение означает, что вы рискуете отключить полностью действующие адреса электронной почты, кроме того, что я согласен с ответом, предоставленным @Ben.

Ответ 4

Результат в isEmailValid может использоваться для проверки правильности синтаксиса электронной почты.

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

Ответ 5

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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, приведенный выше код работает.

Ответ 6

Проверка электронной почты является очень важным моментом при проверке формы HTML. На этой странице мы обсудили, как проверить электронную почту с помощью JavaScript:

Письмо - это строка (подмножество символов ASCII), разделенная на две части символом @. "personal_info" и домен, то есть personal_info @domain. Длина части personal_info может составлять до 64 символов, а имя домена - до 253 символов. Часть personal_info содержит следующие символы ASCII.

  1. Прописные (AZ) и строчные (az) английские буквы.
  2. Цифры (0-9).
  3. Персонажи ! # $% & '* + -/=? ^ _ '{| } ~
  4. Символ. (точка, точка или полная остановка) при условии, что это не первый или последний символ, и он не будет приходить один за другим.

Доменное имя [например, com, org, net, in, us, info] содержит буквы, цифры, дефисы и точки.

Пример действительного идентификатора электронной почты

[email protected]

[email protected]

[email protected]

Пример неверного идентификатора электронной почты

mysite.ourearth.com [@нет]

mysite @.com.my [tld (домен верхнего уровня) не может начинаться с точки "." ]

@you.me.net [Без символа до @]

[email protected] [".b" не является допустимым tld]

mysite @.org.org [tld не может начинаться с точки "." ]

.mysite @mysite.org [электронная почта не должна начинаться с "." ]

mysite() * @gmail.com [здесь регулярное выражение допускает только символ, цифру, подчеркивание и тире]

mysite..1234 @yahoo.com [двойные точки не допускаются]

Код 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

Ответ 7

Если вы хотите разрешить акцент (см. RFC 5322) и разрешить новое расширение домена, например .quebec. используйте это выражение:

/\b[a-zA-Z0-9\u00C0-\u017F._%+-][email protected][a-zA-Z0-9\u00C0-\u017F.-]+\.[a-zA-Z]{2,}\b/
  • Часть '\ u00C0-\u017F' предназначена для акцента. Для этого мы используем диапазон Unicode.
  • "{2,}" просто скажем минимум 2 char для расширения домена. Вы можете заменить это на "{2,63}", если вам не нравится диапазон инфинитива.

Основываясь на этой статье

JsFidler 

$(document).ready(function() {
var input = $('.input_field');
var result = $('.test_result');
        var regExpression = /\b[a-zA-Z0-9\u00C0-\u017F._%+-][email protected][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>

Ответ 8

Вы также можете использовать ссылку

Ответ 9

введите описание изображения здесь

<!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>

Ответ 10

  

<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>