正则表达式小实例--验证邮箱地址

用正则表达式验证邮箱地址是否正确

设置一个输入框，一个按钮，一个信息打印处

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

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

    <p>在此打印信息</p>

获取输入框、按钮的id，还有p标签节点，对输入的邮箱地址用正则表达式验证是否正确

//获取点击按钮的节点
        var post = document.getElementById('postEmail');
        post.addEventListener('click', function() {
     //给按钮添加2级监听事件
            //获取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 + ' 邮箱有误，请重新输入';
            }
        })

正确

正确

错误

我们来稍微详解一下正则表达是如何验证的

邮箱的两个示例
[email protected]
[email protected]
可以看到邮箱地址基本分为三个部分： [收件人账号]@[邮箱名].[后缀名]
因此我们的正则表达式也可以分为三个部分
[匹配收件人账号（数字/字母//-）]@[邮箱名（数字/字母//-）].[后缀名（数字/字母/_/-）]

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

验证正则表达式
最后可以看到的轨道图便是这样的