DEV Community

Jim Montgomery
Jim Montgomery

Posted on • Updated on

the web platform: validate email addresses, internationalized

Use The Web Platform to easily handle any email address--doing everything other than actually verifying email arrives at an address, including fully internationalized and valid character sets.

The URL interface provides a massively useful toolkit for most anything related to parsing URLs, so it's generally no longer necessary to parse any URL--simply use the tools. Because usernames can be included in a valid URL we can leverage this in the general pattern along the lines of http://username@domain. By assembling the appropriate pieces and passing off to construct a URL then briefly check to see if it looks like it worked and fits the expected bounds of validity. This handles the wide range of deficits I personally encounter across web services as well as any valid character sets specific to your audience. I personally don't use and guess many of us aren't especially familiar with many of these potential audience-specific needs, from Farsi to Hebrew to Mandarin, etc. Because it's so permissive it should work well for any users and afford all the utility short of actually sending an email.

function validEmail(input=''){
    const emailPatternInput = /^[^@]{1,64}@[^@]{4,253}$/, emailPatternUrl = /^[^@]{1,64}@[a-z][a-z0-9\.-]{3,252}$/i;
    let email, url, valid = false, error, same = false;
    try{
        email = input.trim();
        // handles punycode, etc using browser's own maintained implementation
        url = new URL('http://'+email);
        let urlderived = `${url.username}@${url.hostname}`;
        same = urlderived === email;
        valid = emailPatternInput.test( email );
        if(!valid) throw new Error('invalid email pattern on input:' + email);
        valid = emailPatternUrl.test( urlderived );
        if(!valid) throw new Error('invalid email pattern on url:' + urlderived);
    }catch(err){
        error = err;
    };
    return {email, url, same, valid, error};
}

[
 'user+this@はじめよう.みんな'
, 'stuff@things.eu'
, 'stuff@things'
, 'user+that@host.com'
, 'Jean+François@anydomain.museum','هيا@יאללה'
, '试@例子.测试.مثال.آزمایشی'
, 'not@@really'
, 'no'
].forEach(email=>console.log(validEmail(email), email));
Enter fullscreen mode Exit fullscreen mode

Comments here and the related gist are very welcome. Hope it helps you connect with your audience more successfully and better utilize the platform.

On The Web Platform: Following several several years of using frameworks and libraries I realized the high cost associated with this Catholic-wedding approach, especially when something naturally changes like updates, etc. As a result I began focusing on what patterns and trends were actively evolving in native browser support. This based on the premise that in browsers, the engineering and vetting of solutions is of a higher caliber than the in-the-wild constantly maturing community. As a result those native solutions will tend to be more stable and longer lived, and a better investment long-term.

Top comments (0)