JS的一些简单应用 —— 正则验证邮箱

本文链接：https://blog.csdn.net/dyw_666666/article/details/80375629

代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <pre>
            1、用户名只能是字母及数字 6-11位
            2、email为正确的email格式
        </pre>
        <!-- form>p*3>input:text -->
        <form action="">
            <p>用户名<input type="text" name="username" /></p>
            <p>Eamil:<input type="text" name="email" /></p>
            <p><input type="submit" value="提交" /></p>
        </form>
    </body>
    <script>
    document.getElementsByTagName('form')[0].onsubmit = function() {
        var patt = /^[a-zA-Z0-9]{6,11}$/;
/*

/^              匹配输入字符串的开始位置
[A-Za-z0-9]     大小写字母和数字任选
{6,11}          长度大于6小于11
$/              匹配输入字符串的结束位置

*/

    if(!patt.test(document.getElementsByName('username')[0].value)) {
        alert('用户名由6-11位字母数字组成');
        return false;
    }

    patt = /^\w+@\w+(\.\w+)+$/
/*

/^             匹配字符串开头
\w+            匹配一个或多个字母数字下划线
@              匹配@字符
\.             匹配.字符
$              匹配字符串结尾

整体来看即开头是一个或连续多个数字、字母、下划线的字符，然后是一个@，@后面又跟着一个或多个字母数字下划线，然后是一个.

最后又有一个或多个字母数字下划线

 */
    if(!patt.test(document.getElementsByName('email')[0].value)) {
        alert('请输入正确的email');
        return false;
    }

    }
    </script>
</html>