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>之间从执行结果来看是没有区别的。
