JavaScript正则验证邮箱以及JS语句写在不同位置的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <form action="">
        <p>
            用户名：<input type="text" name="username" />
        </p>
        <p>
            Email:<input type="text" name="email" />
        </p>
        <p>
            <input type="submit" value="submit" />
        </p>
    </form>
</body>
<script type="text/javascript">
        document.getElementsByTagName('form')[0].onsubmit = function(){
            var patt = /^[a-zA-Z0-9]{6,11}$/;     //用户名为6-11位字母及数字
            
            if(!patt.test(document.getElementsByName('username')[0].value)){
                alert('warning');
                return false;
            }
            patt = /^w+@w+(.w+)+$/            //输入正确的email地址
            if(!patt.test(document.getElementsByName('email')[0].value)){
                alert('error');
                return false;
            }
        }
    </script>
</html>

运行过程中遇到一个问题：若JS代码写在<head></head>中，则不能实现验证效果。

通常我们插入JS代码会有以下几种情况：

（1）javascript代码写在<head>里面：

由于这时候网页主体（body）还未加载，所以这里适合放一些不是立即执行的自定义函数，立即执行的语句则很可能会出错（视浏览器而定）。有时候并不需要一载入HTML就运行Javascript，而是用户点击了HTML中的某个对象，触发了一个事件，才需要调用Javascript。这时候，通常将这样的Javascript放在HTML的<head></head>里。

定义为函数并用于页面事件的JavaScript应当放在head标记中，因为它会在body之前加载。采用这种方法，页面就不会被脚本搞得一团糟，易于阅读，在每个页面中，总可以在同一个位置找到脚本。

（2）javascript代码写在<body>里面：

这里可以放函数也可以放立即执行的语句，但是如果需要和网页元素互动的（比如获取某个标签的值或者给某个标签赋值），Javascript代码务必在标签的后面。当JavaScript要在页面加载过程中动态建立一些Web页面的内容时，应将JavaScript放在body中。

写在body主体里，是为了实现某些部分动态地创建文档。这里比如制作鼠标跟随事件，肯定只有当页面加载后再进行对鼠标坐标的计算。或者是filter滤镜与javascript的联合使用产生的图片淡入淡出效果等。这个是在页面加载的时候加载。

（3）javascript代码写在<body>下面：

这时候整个网页已经加载完毕了，所以这里最适合放需要立即执行的命令，而自定义函数之类的则不适合

（4）Javascript写在<head></head>中，将Javascript程序放到一个后缀名为.js的文本文件里。

在HTML里引用外部文件里的Javascript，应在Head里写一句<script src="文件名"></script>，其中src的值，就是Javascript所在文件的文件路径。

javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。因而除了部分需要在网页中输出内容、调整显示的JavaScript必须放在<head></head>之间，一般的JavaScript放在<head></head>和放在<body></body>之间从执行结果来看是没有区别的。

JavaScript正则验证邮箱以及JS语句写在不同位置的区别

相关推荐