文章教程

3.3JavaScript应用举例

9/17/2020 9:49:37 PM 人评论 次浏览

3.3 JavaScript应用举例

在熟悉了JavaScript基本语法之后,本节使用JavaScript来实现一个小案例。JavaScript是在原有的HTML基础上增加一些交互行为,使页面更加生动,但起不到真正的安全作用,如果需要解决页面安全方面的问题,还需要继续学习后续章节PHP的运用。

1. 案例要求

(1)声明完整的HTML DTD,体验DTD的作用。

(2)实现HTML基本文档结构。

(3)网页声明字符编码方式。

(4)注意文档保存编码方式。

(5)实现简单的form表单。

(6)针对表单进行正确性验证。

①姓名不能超过30个字符;

②电话号码必须是数字;

③电子邮箱必须符合基本格式要求。

image

图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();">
  姓&nbsp;&nbsp;&nbsp;&nbsp;名:<input type="text" name="username"><br/>
  电话号码:<input type="text" name="phone"><br/>
  电子邮箱:<input type="text" name="email"><br/>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp	
  ;&nb
  sp;&nbsp;&nbsp;&nbsp;<input type="submit">
  </form>
  </body>
  </html>

教程类别