3.3 JavaScript应用举例
在熟悉了JavaScript基本语法之后，本节使用JavaScript来实现一个小案例。JavaScript是在原有的HTML基础上增加一些交互行为，使页面更加生动，但起不到真正的安全作用，如果需要解决页面安全方面的问题，还需要继续学习后续章节PHP的运用。
1. 案例要求
（1）声明完整的HTML DTD，体验DTD的作用。
（2）实现HTML基本文档结构。
（3）网页声明字符编码方式。
（4）注意文档保存编码方式。
（5）实现简单的form表单。
（6）针对表单进行正确性验证。
①姓名不能超过30个字符；
②电话号码必须是数字；
③电子邮箱必须符合基本格式要求。
图3-1 简单表单效果
简单表单效果如图3-1所示：
2. 案例分析
（1）XHTML中的DTD规定了网页中的语法，包括严格类型、过渡类型和针对框架集类型三种，本次案例考虑到使用HTML的特性以及浏览器的兼容性问题，因此选择过渡类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（2）XHTML基本文档结构包括DTD、HEAD、BODY三部分。
（3）本案例为防止页面出现乱码，在<head>标记中的<meta>里声明编码方式为utf-8。
（4）文档存储时选择utf-8。
（5）Form表单需要出现两个文本框，一个密码框，一个“提交”按钮。
（6）表单要求：
①客户输入姓名时只允许为字符，且长度不能超过30个，使用正则表达式；
②电话号码为数字，使用正则表达式；
③邮箱需要以一定格式显示，使用正则表达式。
3. 案例实现
代码如下。
3-22.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用JavaScript验证表单的正确性 </title>
<script type="text/JavaScript">
function test(){
//判断姓名长度不能超过30个字符
if(document.myForm.username.value.length>30){
alert("不能超过30个字符！");
document.myForm.username.focus();
return false;
}
//判断电话号码是否只包含数字
if((/^[0-9]+$/).test(document.myForm.phone.value)){
alert("ok");}else{
return false;}
//判断邮箱格式是否正确
if ((/^\w+\@[A-Za-z0-9]+\.[A-Za-z0-9]+$/).search(document.myForm.email.
value) != -1)
alert("ok");
else
return false;
}
}
</Script>
</head>
<body>
<form name="myForm" onsubmit="return test();">
姓 名：<input type="text" name="username"><br/>
电话号码：<input type="text" name="phone"><br/>
电子邮箱：<input type="text" name="email"><br/>
 
;&nb
sp; <input type="submit">
</form>
</body>
</html>