Email validation is a critical web application feature that confirms users provide a well-formatted email address prior to form submission. From login pages, signup forms, or contact pages, email input validation ensures data integrity, improves security, and offers a better user experience.

Without validation, the users may insert incorrectly formatted email addresses, and this may create problems like undeliverable emails, spams sign-ups, or even security threats. JavaScript provides numerous methods for efficient email address validation.  Let’s learn some different JavaScript methods for validating an email address!

Validate Email Addresses in JavaScript

1) Using Regular Expressions (RegExp.test())

Regular Expressions (also referred to as regex) are magical patterns that assist us in searching for particular text within a string. Consider them as detective tools—detection of patterns, detection of errors, and ensuring that things appear the way they are supposed to!  A regular expression (regex) is a pattern used to match certain text. The test() method verifies whether the email has a standard format.Let’s us look at the below example.

INPUT:

function isValidEmail(email) {
    let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

console.log(isValidEmail("[email protected]"));
console.log(isValidEmail("invalid-email"));    

OUTPUT:

true (valid), false (invalid)

2) Using the match() Method

Ah, the match() method—kind of like that friend who not only tells you if something exists but also shows you exactly where and what it is! Unlike RegExp.test(), which simply says “Yes” or “No”, the match() method is a bit more talkative—it returns the actual matched email if it finds one. The match() method checks if an email string matches a regex pattern.

INPUT:

function isValidEmail(email) {
    let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return email.match(emailRegex) !== null;
}
console.log(isValidEmail("wrong@com")); 

console.log(isValidEmail("[email protected]")); 

OUTPUT:

false (invalid),true (valid)

3) Using HTML5 Email Input Validation

Why stress over writing JavaScript when HTML itself can do the heavy lifting?  With the <input type=”email”> field, browsers automatically check whether the email format is correct.

INPUT:

<input type="email" id="emailInput" required>
<button onclick="validate()">Submit</button>

<script>
function validate() {
    let emailInput = document.getElementById("emailInput");
    console.log(emailInput.checkValidity()); 
}
</script>

This method relies on the browser to check if the email is correctly formatted.

• The type=”email” ensures that the input only accepts a valid email format (like [email protected]).
• If the user types hello@world, the browser will automatically stop them with a warning.
• The required attribute makes sure the field isn’t left empty.

Conclusion

• Use RegExp.test() for quick client-side email validation.
• Use HTML5 <input type=”email”> for built-in browser validation.
• Always validate on the server-side to prevent security risks.
• Use match() for extracting emails from text-based data.
• Combine client & server validation for accuracy and security.

🔗 If wanna learn more you can refer : MDN Web Docs: Regular Expressions