Validate email address textbox using JavaScript

前端未结

关注

 10  818

I have a requirement to validate an email address entered when a user comes out from the textbox.
I have googled for this but I got form validation JScript; I don\'t wa

相关标签:

10条回答

遥遥无期

2020-12-02 17:52

The result in isEmailValid can be used to test whether the email's syntax is valid.

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

0 讨论(0)

小蘑菇

2020-12-02 17:53
Are you also validating server-side? This is very important.

Using regular expressions for e-mail isn't considered best practice since it's almost impossible to properly encapsulate all of the standards surrounding email. If you do have to use regular expressions I'll usually go down the route of something like:
```
^.+@.+$
```
which basically checks you have a value that contains an @. You would then back that up with verification by sending an e-mail to that address.

Any other kind of regex means you risk turning down completely valid e-mail addresses, other than that I agree with the answer provided by @Ben.
0 讨论(0)
发布评论:

提交评论
- 加载中...

慢半拍i

2020-12-02 17:53

If you wish to allow accent (see RFC 5322) and allow new domain extension like .quebec. use this expression:

/\b[a-zA-Z0-9\u00C0-\u017F._%+-]+@[a-zA-Z0-9\u00C0-\u017F.-]+\.[a-zA-Z]{2,}\b/

The '\u00C0-\u017F' part is for alowing accent. We use the unicode range for that.
The '{2,}' simply say a minimum of 2 char for the domain extension. You can replace this by '{2,63}' if you dont like the infinitive range.

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>

0 讨论(0)

南旧

2020-12-02 17:56

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

0 讨论(0)

上一页 1 2