1.3 JavaScript
JavaScript同CSS一样，不需要使用复杂的工具来编写，可以使用文本编辑器或者Web开发工具来编写。
1.3.1 在网页中添加JavaScript的方法
1. 嵌入使用
在网页代码中任何位置都可嵌入JavaScript代码，但建议嵌入到head标记中。示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript嵌入学习</title>
<script type="text/javascript">
alert（"第一次看到警告框很兴奋！"）;
</script>
</head>
<body>
好好学习 JavaScript知识。
</body>
</html>
2. 引入使用
当多个页面使用相同的JavaScript代码时，可以将共用的代码保存在以.js为扩展名的文件中，然后在页面中使用src属性引入外部js文件。示例代码如下：
myFirst.js
alert（"被引入到页面中！"）;
引入外部 js文件学习．html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>引入外部 js文件</title>
<script type="text/javascript" src="myFirst.js" charset="GBK">
</script>
</head>
<body>
好好学习 JavaScript知识。
</body>
</html>
1.3.2 JavaScript基本语法
1. 变量
使用var可以声明任意类型的变量，如：
var firstNumber =10;
2. 类型转换
JavaScript是弱类型语言，变量的类型对应于其值的类型。可以对不同类型的变量执行运算，解释器强制转换数据类型，然后进行处理。例如：数值与字符串相加，将数值强制转换为字符串；布尔值与字符串相加，将布尔值强制转换为字符串；数值与布尔值相加，将布尔值强制转换为数值。
字符串到数值的转换包括parseInt（s）将字符串转换为整数，parseFloat（s）将字符串转换为浮点数，Number（s）将字符串转换为数字。parseInt和parseFloat方法只对string类型有效，且需要是数字开头的字符串。
3. 运算符
1）赋值运算符
赋值运算符的运算规则及说明如表1.3所示。
表1.3 赋值运算符
2）数学运算符
数学运算符的运算规则及说明如表1.4所示。
表1.4 数学运算符
3）逻辑运算符
逻辑运算符的运算规则及说明如表1.5所示。
表1.5 逻辑运算符
4）typeof运算符
对变量或值调用typeof运算符将返回对应的值，typeof运算符的运算规则及说明如表1.6所示。
表1.6 typeof运算符
4. 注释
为了程序的可读性，以及便于日后代码的修改和维护，可以在JavaScript程序里为代码写注释。在JavaScript程序里，用两个斜杠“//”表示单行注释。多行注释用“/∗”表示开始，“∗/”表示结束。注释示例代码如下：
aGoodIdea ="Comment your code thoroughly."; //这是单行注释
/∗
这是多行注释 行一。
这是多行注释 行二。
∗/
5. 变量命名规则
以字母、下画线（_）或美元符号（$）开头；余下的字符可以是下画线、美元符号或任何的字母、数字；不能有空格，大小写敏感；不能使用JavaScript中的关键字或保留字命名。
6. 部分保留字
部分保留字如下：break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、this、void、continue、false、instanceof、throw、while、finally、new、true、with、default、for、null、try。
【例1-6】编写网页example1_6.html，在网页中嵌入使用JavaScript，JavaScript程序的具体要求如下：
• 声明变量firstNumber，并将“I am a String”赋值给该变量；
• 声明变量secondNumber，并将300赋值给该变量；
• 声明变量thirdNumber，并将firstNumber＋secondNumber赋值给该变量；
• 使用alert弹出变量thirdNumber的值；
• 使用typeof运算符判断变量firstNumber、secondNumber以及thirdNumber的值的类型，并使用alert分别弹出typeof的返回结果。
例1-6页面文件example1_6.html的代码如下：
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>example1_6.html</title>
<script type="text/javascript">
var firstNumber ="I am a String";
var secondNumber =300;
var thirdNumber =firstNumber +secondNumber;
alert（thirdNumber）;
alert（"firstNumber的值类型：" +typeof（firstNumber））;
alert（"secondNumber的值类型：" +typeof（secondNumber））;
alert（"thirdNumber的值类型：" +typeof（thirdNumber））;
</script>
</head>
<body>
</body>
</html>
1.3.3 流程控制与函数
1. 流程控制语句
1）if条件语句
if（表达式）{
语句
}
或
if（表达式））{
语句
}else{
语句
}
2）switch条件语句
switch（表达式）{
case case1:
语句
break;
case case2:
语句
break;
…
default:
default语句
}
3）for循环语句
for（表达式 1；表达式 2；表达式 3）{
语句
}
4）while循环语句
while（表达式）{
语句
}
5）do-while循环语句
do{
语句
}while（表达式）
6）break/continue语句
break语句让执行语句从循环语句或其他程序块中跳出。continue语句让执行语句跳过本次循环的剩余语句进入下一次循环。
2. 函数
将完成某个功能的一组语句常写成一个函数，函数的定义格式如下：
function 函数名（[参数，参数]）{
函数体
}
function是关键字，函数没有类型，参数也没有类型。例如：
function gogo（obj）{
document.write（"函数没有类型，参数也没有类型"）;
}
3. arguments对象
函数可以接收任意个数的参数，通过arguments对象来访问。示例代码如下：
function say（）{
if（arguments[1] ! ="你好"）{
alert（arguments[0]）;
}else{
alert（arguments[1]）;
}
alert（arguments.length）; //返回参数的个数
}
调用函数如下：
say（"How are you? ", "你好"）;
4. 系统函数
JavaScript提供了与任何对象无关的系统函数，使用这些函数不需要创建任何对象就可以直接使用。
1）eval（字符串表达式）
该函数的功能是返回字符串表达式的值，例如：
var test =eval（"2+3"）; //test的值为 5
2）parseInt（字符串）
该函数的功能是将以数字开头的字符串转换为整数，例如：
var test =parseInt（"200.5abc"）; //test的值为 200
3）parseFloat（字符串）
该函数的功能是将以数字开头的字符串转换为浮点数，例如：
var test =parseFloat（"200.5abc"）; //test的值为 200.5
4）Number（字符串）
该函数的功能是将数字字符串转换为数字，字符串中有非数字字符则返回NaN。例如：
var test =Number（"200.5abc"）; //test的值为 NaN
【例1-7】编写网页example1_7.html，在网页中嵌入使用JavaScript程序打印出九九乘法表，网页运行效果图1.17所示。
图1.17 九九乘法表
例1-7页面文件example1_7.html的代码如下：
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>example1_7.html</title>
<script type="text/javascript">
for（var i =1; i <=9; i++）{
for（var j =1; j <=i; j++）{
document.write（i +"∗" +j +"=" +i∗j +" "）; //在页面输出
}
document.write（"<br>"）;
}
</script>
</head>
<body>
</body>
</html>
5. 函数调用
1）在链接中调用函数
用户单击链接时，即调用函数，格式如下：
<a href="javascript：函数">…</a>
在链接中调用函数的示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>链接调用函数</title>
<script type="text/javascript">
function gogo（）{
alert（"被链接调用的函数"）;
}
</script>
</head>
<body>
<a href="javascript:gogo（）">链接调用函数</a>
</body>
</html>
2）由事件触发调用函数
触发事件调用函数，格式如下：
事件="函数"
触发事件调用函数的示例代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件触发调用函数</title>
<script type="text/javascript">
function gogo（param）{
alert（param）;
}
</script>
</head>
<body>
<form action="">
<input type="button" value="单击我" onclick="gogo（'O（∩_∩）O哈哈～'）"/>
</form>
</body>
</html>
1.3.4 JavaScript对象
一个JavaScript对象中可包含若干属性和方法。属性是描述对象的状态，对象用“.”运算符访问属性。方法是描述对象的行为动作，对象用“.”运算符调用方法。
1. 对象创建
使用new关键字来创建对象，如：
var oStringObject =new String（）;
如果构造函数无参数，则不必加括号。
2. JavaScript内部对象
1）数组（Array）对象
• 创建数组
数组创建的示例代码如下：
var myArray =new Array（）; //新建一个长度为 0的数组
var myArray =new Array（100）; //新建一个长度为 100的数组
var myArray =new Array（1,2,3）; //新建一个指定长度的数组，并赋初值
数组长度不固定，赋值即可改变长度。数组的主要属性length返回数组长度。
• 数组的常用方法
reverse方法：将JavaScript数组对象内容反转。
concat方法：将两个或更多数组组合在一起，如：
var newArray =tmpArray.concat（tmpArray）;
join方法：返回一个将数组所有元素用指定符号连在一起的字符串，如：
var newString =tmpArray.join（"."）;
pop（）方法：移除数组中的最后一个元素并返回该元素。
shift（）方法：移除数组中的第一个元素并返回该元素。
slice方法：返回数组的一部分，如：
var newArray =tmpArray.slice（1,3）;
• 数组的使用
数组的使用，示例代码如下：
<script type="text/javascript">
var myArray =new Array（）;
for（var i =0; i <5; i++）{
myArray[i] =i;
}
for（var j =0; j <myArray.length; j++）{
alert（myArray[j]）;
}
</script>
2）日期（Date）对象
Date对象可以用来表示任意的日期和时间。
• 创建Date对象
必须使用new运算符创建一个Date对象。示例代码如下：
var date =new Date（"July 8,2012"）; //2012年 7月 8日
var date =new Date（2012,7,8）; //2012年 8月 8日
var date =new Date（"2012/7/8"） ; //2012年 7月 8日
var date=new Date（Milliseconds）; //自1970年1月1日以来的毫秒数创建的日期对象
var date =new Date（）; //当前系统的时间对象
• 获取日期的时间方法
getYear（）：返回年数。
getMonth（）：返回当月号数（比实际值小1）。
getDate（）：返回当日号数。
getDay（）：返回星期几（0表示周日）。
getHours（）：返回小时数。
getMinutes（）：返回分钟数。
getSeconds（）：返回秒数。
getTime（）：返回毫秒数。
• 设置日期和时间的方法
setYear（）：设置年数。
setMonth（）：设置当月号数（set6表示7月）。
setDate（）：设置当日号数。
setHours（）：设置小时数。
setMinutes（）：设置分钟数。
setSeconds（）：设置秒数。
setTime（）：设置毫秒数。
• Date对象的使用
Date对象的使用，示例代码如下：
<script type="text/javascript">
var date =new Date（"2050/12/25"）;
document.write（"2050的圣诞节是星期"+date.getDay（）+"<br>"）;
var datenow =new Date（）; //得到当前日期对象
var mills =date -datenow; //两个 Date对象相减得到两个日期的时间间隔（单位是毫秒）
document.write（"2050的圣诞节距离现在还有"+mills+"毫秒<br>"）;
</script>
3）String对象
• 创建String对象
字符串对象的创建，示例代码如下：
var firstString ="This is a string";
var secondString =new String（"This is a string"）;
String对象的主要属性length返回字符串的长度。
• String对象的常用方法
charAt（i）：返回指定索引位置处的字符，索引从0开始。
concat（str）：连接字符串。
indexOf（str）：返回String对象内第一次出现子字符串的字符位置（从左到右查找）。
lastIndexOf（str）：返回String对象中子字符串最后出现的位置。
replace（str1，str2）：返回将str1替换为str2后的字符串。
split（separator, limit）：将字符串以separator作为分隔符切割成多个子字符串，并将它们作为一个数组返回；如果有limit参数则返回数组的limit个元素。
substring（start, end）：返回一个指定位置之间的子字符串，不包括end。
toLowerCase（）：返回一个字符串，字符串中的字母被转换为小写字母。
toUpperCase（）：返回一个字符串，字符串中的字母被转换为大写字母。
• String对象的使用
String对象的使用，示例代码如下：
<script type="text/javascript">
var firstString ="This is a string";
for（var i =0; i <firstString.length; i++）{
alert（firstString.charAt（i））;
}
</script>
4）Math对象
Math对象是个全局对象，使用时不需要创建。
• Math对象的属性
LN10：10的自然对数。
LN2：2的对数。
PI：圆周率。
SQRT1_2：1/2的平方根。
SQRT2：2的平方根。
• Math对象的常用方法
abs（x）：返回x的绝对值。
ceil（x）：返回大于等于x的最小整数。
floor（x）：返回小于等于x的最大整数。
round（x）：舍入到最近整数。
sqrt（x）：返回x的平方根。
random（）：返回0~1的随机数。
• Math对象的使用
Math对象的使用，示例代码如下：
<script type="text/javascript">
alert（Math.SQRT2）;
alert（Math.random（））;
</script>
【例1-8】编写网页example1_8.html，在网页中定义一个JavaScript函数，功能是去除字符串开头及末尾的空格，并使用超链接来调用该函数。
例1-8页面文件example1_8.html的代码如下：
<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>example1_8.html</title>
<script type="text/javascript">
function print99（x）{
while（（x.length>0） && （x.charAt（0） ==' '））
x =x.substring（1, x.length）;
while（x.length>0&&（x.charAt（x.length-1） ==' '））
x =x.substring（0, x.length-1）;
alert（"Kill=" +x +"=="）
return x;
}
</script>
</head>
<body>
<a href="javascript:print99（' abc def '）">单击我啊！</a>
</body>
</html>
1.3.5 JavaScript对象模型
1. 浏览器对象模型
浏览器对象是提供独立于内容而与浏览器窗口进行交互的对象。浏览器对象模型如图1.18所示。
图1.18 浏览器对象模型
2. 窗口（window）对象
1）打开新窗口
使用open（）方法可打开一个新窗口，示例代码如下：
var winObj=open（"target.html", "target_1", "width=500, height=300, scrollbars=no"）;
open方法有3个参数：第一个代表要载入新窗口页面的URL＇第二个代表新窗口的名称；第三个代表新窗口的属性，多个属性间用逗号隔开。
2）对话框（与用户交互）方法
• alert（）
该方法的功能是弹出一个提示框。示例代码如下：
<script type="text/javascript">
alert（"请单击"确定"按钮！"）;
</script>
运行效果如图1.19所示。
图1.19 具有“确定”按钮的对话框
• prompt（message, defaultText）
该方法的功能是弹出可以输入信息的文本框，第一个参数代表用户输入信息的提示，第二个参数代表文本框的默认值。示例代码如下：
<script type="text/javascript">
prompt（"What's your name? ", "chenheng"）;
</script>
运行效果如图1.20所示。
图1.20 用户输入对话框
• confirm（message）
该方法的功能是弹出对话框，提示确认信息。示例代码如下：
<script type="text/javascript">
if（confirm（"真的删除吗？"））{
//单击"确定"按钮后的操作
}else{
//单击"取消"按钮后的操作
}
</script>
运行效果如图1.21所示。
图1.21 确认对话框
3. history对象
history对象记录着浏览器所浏览过的每一个页面，这些页面组成了一个历史记录列表。它有以下3个主要方法。
forward（）：将历史记录向前移动一个页面。
back（）：将历史记录向后移动一个页面，在网页中经常使用该方法提供一个“返回”的功能。
go（）：转向历史记录中指定的地址，使用此方法需要一个参数，参数可以是正负整数或字符串。如果参数是字符串，那么浏览器就会搜索列表，找到最接近当前页面位置且URL地址中含有此字符串的页面，然后转到该页面。
history对象的使用，示例代码如下：
history.go（-3）; //向后返回三个访问过的页面
histroy.go（3）; //向前返回三个访问过的页面
history.back（）; //与 history.go（-1）；功能相同
history.forward（）; //与 history.go（1）；功能相同
4. location对象
window对象的location属性可以直接改变URL地址：
window.location="http://www.baidu.com";
或
location="http://www.baidu.com";
还可以使用location对象的href属性或replace（URL）方法改变URL地址：
location.href="http://www.baidu.com";
或
location.replace（"http://www.baidu.com"）;
可以使用location对象的href属性清空页面：
location.href ="about:blank"; //清空页面
5. document对象
1）forms集合
在同一个页面上有多个表单，通过document.forms[]数组获得这些表单对象要比使用表单名称方便得多。
2）getElementById（id）方法
该方法的功能是获得指定id值的表单控件对象。
3）getElementsByName（name）方法
该方法的功能是获得指定name值的表单控件对象，返回的是对象数组。
4）获取表单对象的方法
获取表单对象的方法如下：
document.forms[0]; //通过 forms对象的索引
document.forms["myForm"]; //通过 forms对象和表单名称
document.myForm; //通过表单名称
5）document对象的使用
document对象的使用，示例代码如下：
<html>
<head>
<title>The Document Object</title>
<script type="text/javascript">
function testMethod（） {
//1．通过表单获取控件
var name_1 =document.forms[0].nameTest;
alert（"name_1=" +name_1.value）;
var name_2 =document.forms["myForm"].nameTest;
alert（"name_2=" +name_2.value）;
var name_3 =document.myForm.nameTest;
alert（"name_3=" +name_3.value）;
var name_4 =document.myForm.elements["nameTest"];
alert（"name_4=" +name_4.value）;
//2．通过 name获取控件
var name_5 =document.getElementsByName（"nameTest"）;
alert（"name_5[0]=" +name_5[0].value）;
//3．通过 id获取控件
var id_1 =document.getElementById（"idTest"）;
alert（"id_1=" +id_1.value）;
}
</script>
</head>
<body>
<form name="myForm">
通过name获取：<input type="text"name="nameTest"value="firstTextValue">
<br>
<br>通过id获取：<input type="text"id="idTest"value="secondTextValue">
<br><input type="button" value="Click Me" onclick="testMethod（）">
</form>
</body>
</html>
1.3.6 操作HTML
1. 事件处理
通常将鼠标或热键的动作称为事件。由鼠标或热键引发的一连串程序的动作，称为事件驱动。对事件进行处理的程序或函数称为事件处理程序。
1）窗口或页面的事件处理
窗口或页面的事件处理如表1.7所示。
表1.7 窗口或页面的事件处理
2）键盘或鼠标的事件处理
键盘或鼠标的事件处理如表1.8所示。
表1.8 键盘或鼠标的事件处理
3）表单元素的事件处理
表单元素的事件处理如表1.9所示。
表1.9 表单元素的事件处理
4）事件处理模型
在JavaScript中对事件的处理程序通常由函数完成，事件＝“函数名”，如：
<html>
<head>
<title>The Document Object</title>
<script type="text/javascript">
function testMethod（） {
alert（"事件处理模型"）;
}
</script>
</head>
<body>
<form name="myForm">
<input type="button" value="Click Me" onclick="testMethod（）" >
</form>
</body>
</html>
2. 表单元素
1）表单元素的通用属性与方法
form属性：获取该表单控件所属的表单对象。
name属性：获取或设置表单控件的名称。
type属性：获取表单控件的类型。
value属性：获取和设置表单控件的值。
focus方法：让表单控件对象获得焦点。
blur方法：让表单控件对象失去焦点。
表单元素的通用属性及方法的示例代码如下：
<html>
<head>
<title>form</title>
<script type="text/javascript">
//显示属性
function test（） {
var text_name =document.myForm.text_name;
alert（"text_name.form=" +text_name.form.name
+"\ntext_name.name=" +text_name.name
+"\ntext_name.type=" +text_name.type
+"\ntext_name.value=" +text_name.value
+"\ntext_name.defaultValue=" +text_name.defaultValue）;
}
//获得焦点
function do_focus（） {
document.myForm.text_name.focus（）;
}
//失去焦点
function do_blur（） {
document.myForm.text_name.blur（）;
}
</script>
</head>
<body>
<form name="myForm">
<input type="text" name="text_name" value="textValue"><br>
<input type="button"name="button_1"value="显示属性"onclick="test（）"><br>
<input type="button" name="button_2" value="获得焦点" onclick="do_
focus（）"><br>
<input type="button"name="button_3"value="失去焦点"onclick="do_blur（）">
</form>
</body>
</html>
2）文本框
value属性：获得文本框的值，值是字符串类型。
defaultValue属性：获得文本框的默认值，值是字符串类型。
readonly属性：只读，文本框中的内容不能修改。
focus方法：获得焦点，即获得鼠标光标。
blur方法：失去焦点。
select方法：选中文本框内容，突出显示输入区域。
文本框的示例代码如下：
<html>
<head>
<title>文本框求和</title>
<script type="text/javascript">
function add（）{
var sum=0;
var text_1Value=document.forms[0].text_1.value;
var text_2Value=document.forms[0].text_2.value;
sum=Number（text_1Value）+Number（text_2Value）;
document.forms[0].text_3.value=sum;
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="text" name="text_1" value=""><br>
<input type="text" name="text_2" value=""><br>
<input type="text" name="text_3" value=""><br>
<input type="button" value="求和" onclick="add（）">
</form>
</body>
</html>
3）复选框
checked属性：复选框是否被选中，选中为true，未选中为false。
value属性：设置或获取复选框的值。
复选框的示例代码如下：
<html>
<head>
<title>复选框反选</title>
<script type="text/javascript">
function unSelect（） {
var n =document.forms[0].check.length; //得到复选框的个数
for （ var i =0; i <n; i++） {
if （document.forms[0].check[i].checked） {
document.forms[0].check[i].checked =false;
} else {
document.forms[0].check[i].checked =true;
}
}
}
</script>
</head>
<body>
<form action="">
<input type="checkbox" name="check" value="0" />aaa<br><input
type="checkbox" name="check" value="1" />bbb<br><input
type="checkbox" name="check" value="2" />ccc<br><input
type="checkbox" name="check" value="3" />ddd<br><input
type="checkbox" name="check" value="4" />eee<br><input
type="checkbox" name="check" value="5" />fff<br><input
type="button" value="反选" onclick="unSelect（）">
</form>
</body>
</html>
4）单选按钮
checked属性：单选按钮是否被选中，选中为true，未选中为false。
value属性：设置或获取单选按钮的值。
单选按钮的示例代码如下：
<html>
<head>
<title>弹出单选按钮的值</title>
<script type="text/javascript">
function gg（） {
var n =document.forms[0].sex.length;
for （ var i =0; i <n; i++） {
if （document.forms[0].sex[i].checked） {
alert（document.forms[0].sex[i].value）;
}
}
}
</script>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="male" onclick="gg（）" />男
<input type="radio" name="sex" value="female" onclick="gg（）" />女
</form>
</body>
</html>
5）下拉列表
length属性：选项个数。
selectedIndex属性：当前被选中选项的索引。
options属性：所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]，第二个即为options[1]，其他以此类推。
option的value属性：＜option＞标记中value所指定的值。
option的text属性：显示于界面中的文本，即＜option＞…＜/option＞之间的部分。增加选项：每个选项都是一个option对象，可以创建option对象，然后添加到select的末尾。如：
select.options[select.length]=new Option（text, value）;
下拉列表的示例代码如下：
<html>
<head>
<title>下拉列表的应用</title>
<script type="text/javascript">
function gg（） {
var opObject =document.forms[0].elements["cities"]; //获得列表对象
for （ var i =0; i <opObject.options.length; i++） { //使用 options属性
if （opObject.options[i].selected） { //找到被选中的选项
alert（opObject.options[i].value）; //弹出选中选项的值
alert（opObject.options[i].text）; //弹出选中选项的文本
}
}
//为列表新增选项
opObject.options[opObject.length] =new Option（"新增" +1, "new" +1）;
}
</script>
</head>
<body>
<form action="">
<select name="cities" onchange="gg（）">
<option value="daLian">大连</option>
<option value="beiJing">北京</option>
<option value="shangHai">上海</option>
<option value="guanZhou">广州</option>
</select>
</form>
</body>
</html>
1.3.7 表单验证
用户在表单中输入的内容提交到服务器之前，在客户端利用表单控件产生的事件，运用JavaScript，验证用户输入数据的有效性。
1. 正则表达式
表单验证常用的正则表达式如下：
验证邮政编码：/^\d{6}$/
验证身份证号码：/^\d{15}$|^\d{18}$|^\d{17}[xX]$/
验证电子邮箱地址：/^\w+（（-\w+）|（\.\w+））∗\@[A-Za-z0-9]+（（\.|-）[A-Za-z0-9]+）∗\.
[A-Za-z0-9]+$/
验证数字或英文字母：/^[a-z0-9]+$/
验证日期格式：/（（^（（1[8-9]\d{2}）|（[2-9]\d{3}））（[-\/\._]）（10|12|0? [13578]）（[-\/\.
_]）（3[01]|[12][0-9]|0? [1-9]）$）|（^（（1[8-9]\d{2}）|（[2-9]\d{3}））（[-\/\._]）（11|0?
[469]）（[-\/\._]）（30|[12][0-9]|0? [1-9]）$）|（^（（1[8-9]\d{2}）|（[2-9]\d{3}））（[-\/\.
_]）（0?2）（[-\/\._]）（2[0-8]|1[0-9]|0? [1-9]）$）|（^（[2468][048]00）（[-\/\._]）（0?2）
（[-\/\._]）（29）$）|（^（[3579][26]00）（[-\/\._]）（0?2）（[-\/\._]）（29）$）|（^（[1][89][0]
[48]）（[-\/\._]）（0?2）（[-\/\._]）（29）$）|（^（[2-9][0-9][0][48]）（[-\/\._]）（0?2）（[-\/
\._]）（29）$）|（^（[1][89][2468][048]）（[-\/\._]）（0?2）（[-\/\._]）（29）$）|（^（[2-9][0-9]
[2468][048]）（[-\/\._]）（0?2）（[-\/\._]）（29）$）|（^（[1][89][13579][26]）（[-\/\._]）（0?
2）（[-\/\._]）（29）$）|（^（[2-9][0-9][13579][26]）（[-\/\._]）（0?2）（[-\/\._]）（29）$））/
正则表达式的应用示例代码如下：
<html>
<head>
<title>正则表达式的应用</title>
<script type="text/javascript">
//验证 Email
function checkEmail（）{
var exp=/^\w+（（-\w+）|（\.\w+））∗\@[A-Za-z0-9]+（（\.|-）[A-Za-z0-9]+）∗\.[A-
Za-z0-9]+$/;
if（! exp.test（document.forms[0].email.value））{
alert（"Email格式错误！"）;
document.forms[0].email.focus（）;
return false;
}else{
alert（"Email格式正确！"）;
return true;
}
}
</script>
</head>
<body>
<form action="">
Mail:<input type="text" name="email" /><br>
<input type="button" value="提交" onclick="return checkEmail（）" />
</form>
</body>
</html>
2. 表单验证实例
验证密码域：不能为空，长度要大于等于6，只能是字母或数字。代码如下：
<html>
<head>
<title>表单验证实例</title>
<script type="text/javascript">
function valid（form）{
//验证非空
if（form.pass.value.length ==0）{
alert（"Please enter a password"）;
form.pass.focus（）;
return false;
}
//验证长度
if（form.pass.value.length <6）{
alert（"Password must be at least 6 characters"）;
form.pass.focus（）;
return false;
}
var exp=/^[a-z0-9]+$/;
//验证格式
if（! exp.test（form.pass.value））{
alert（"Password contains illegal characters"）;
form.pass.focus（）;
return false;
}
alert（"OK password"）;
return true;
}
</script>
</head>
<body>
<form action="">
Enter your password:
<input name="pass" type="password"/>
<input type="button" value="submit password" onclick="return valid
（this.form）"/>
</form>
</body>
</html>
1.3.8 实践环节——表单验证
制作一个用户注册页面practice1_3.html，具体要求如下：
（1）有常用的登录账号、密码、确认密码、姓名、身份证号码（只考虑18位的身份证）、出生年月日、住址、邮编、E-mail等输入区域（自己设定）。
（2）自己设定验证规则，在提交时检验是否符合要求，用alert提醒出非法的输入，并将焦点返回要输入的控件对象。
（3）根据出生年月日判断身份证号码是否合法（只考虑18位身份证）。
（4）其他验证：登录账号只能是字母或数字且以字母开头；密码要在8位以上且需要有字母和数字之外的字符；出生年月日的格式为yyyy-mm-dd；邮编为6位数字；E-mail的基本格式验证。