Small example of regular expression--validate email address

Use regular expressions to verify that the email address is correct

设置一个输入框,一个按钮,A place where information is printed

	<label>邮箱：<input type="text" id="email"></label>

    <button type="button" id="postEmail">验证邮箱</button>

    <p>Print information here</p>

获取输入框、按钮的id,还有p标签节点,Use regular expressions to verify the correctness of the entered email address

//Get the node on which the button was clicked
        var post = document.getElementById('postEmail');
        post.addEventListener('click', function() {
     //给按钮添加2level listener event
            //获取p标签节点
            var content = document.querySelector('p');

            //获取input输入框中的值
            var eStr = document.getElementById('email').value;

            //正则表达式验证邮箱 例如：
            //[email protected]
            //[email protected]
            //[email protected]
            var reg = /^([A-z0-9_-]+)@([A-z0-9_-]+)+(\.([A-z0-9_-]+))+$/g;

            if (eStr.match(reg)) {
    
                content.innerHTML = eStr + ' 邮箱正确';
            } else {
    
                content.innerHTML = eStr + ' 邮箱有误,请重新输入';
            }
        })

正确

正确

错误

Let's go into a little more detail about how regular expressions are validated

Two examples of mailboxes
[email protected]
[email protected]
You can see that the email address is basically divided into three parts： [收件人账号]@[邮箱名].[后缀名]
So our regular expression can also be divided into three parts
[Match recipient account（数字/字母//-）]@[邮箱名（数字/字母//-）].[后缀名（数字/字母/_/-）]

var reg = /^([A-z0-9_-]+)@([A-z0-9_-]+)+(\.([A-z0-9_-]+))+$/g;

验证正则表达式
The final track map you can see is like this