第9单元 表单的设计与验证
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
文本字段的属性
9.1.1表单制作的初步知识
(3) 隐藏域 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问 者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息 用你设置时定义的名称和值发送到服务器上。 代码格式：＜input type="hidden" name="..." value="..."＞
9.2表单验证
在动态网页设计中，表单的作用就是从用户处收集数 据，当填写完表单后点击提交按钮时，表单的内容将 会提交给服务器程序。由于用户填写的随意性，提交 给表单的数据往往并不符合要求。所以一般都会在数 据提交前通过客户端脚本对数据进行验证，这个过程 就称为表单验证。
9.2.1表单设计举例
9.2.2表单验证的内容
在表单验证中可以将功能相似的验证编写为函数， 以便后面多次调用。下面的程序对上节举例中的用户注 册表单进行数据的合法性验证。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户注册表单验证</title> <style type="text/css"> <!-.red { color: #F00; } --> </style> </head>
对表单进行验证有多种办法，下面介绍两种最常用 的办法。 方法一：在表单中加入一个提交按钮。用户点击时 会自动引发表单的onsubmit事件。然后在表单的 onsubmit事件处理函数中对表单内容进行验证。 方法二：在表单中不需要使用提交按钮，为任一元 素添加鼠标单击事件，在其单击事件处理函数中对表单 数据进行验证，如果数据合法，通过表单对象的submit() 方法来提交表单。
9.2.2表单验证的内容
function check() { var f=document.getElementById("form1");//获取表单对象 if(isEmpty(f.username.value))//验证用户名是否为空 { alert("用户名必须填写！！"); f.username.focus(); return false; } if(isEmpty(f.password1.value))//验证密码是否为空 { alert("密码不能为空！！"); f.password1.focus(); return false; } if(isEmpty(f.password2.value))//验证重复密码是否为空 { alert("重复密码不能为空！！"); f.password2.focus(); return false; }
(9) 文件域 用户需要上传自己的文件，访问者可以通过输入需要 上传的文件的路径或者点击浏览按钮选择需要上传的文 件。文件域的代码为：<input type=“file” name=“fileField” id=“fileField” />。文件域和文本字段等的标签一样都是 <input>，它们主要是通过属性type进行区别的。文件域 如下图所示。
9
表单的设计与验证
目录
9.1 表单设计 9.2 表单验证
本章简要讲述了表单制作的基本知识，详细讲解了各 个表单项及其使用方法。并以实例的形式详细讲解了表 单的设计、制作和验证。
目标
通过本章的学习，学生应该对JavaScript有一个全面深入的了 解，并能编写常用的JavaScript脚步代码。
9.1.2表单设计举例
表单中的出生年月后的列表项中填加的列表值的范围 从1900到2100，如果采用从列表属性面板中输入工作量 会很大。这里采用JavaScript配合dom定义一个函数来完 成列表选项值的初始化工作。在<body>的onload事件调 用这个函数。程序的代码为:
<script language="javascript"> function initSelector() { var selector=document.getElementById("year");//获取列表框 对象，其id为"year"
下面我们以一个例子来具体说明一下表单的设计步骤。要设计的表 单如图9.12所示，这个表单用来收集用户的注册信息。
9.1.2表单设计举例
用户名： 文本字段
表单中各个表单项及设置
密码： 文本字段(属性选择密码项)
密码确认： 文本字段(属性选择密码项)
性别： 两个单选按钮(两个单选按钮的name属性都设置为sex) 出生年份： 列表 兴趣爱好： 多个复选框
(7) 单选按钮组和复选框组 为了帮助网页设计者快速的设计单选按钮和复选按钮， Dreamweaver中还提供了单选按钮组和复选按钮组这两 个表单项。它们可以在可视化操作下快速的设计多个单 选按钮或复选框，大家可自行试验它们的用法。
9.1.1表单制作的初步知识
(8) 列表/菜单项 列表菜单项允许在一个有限的空间设置和选择多个选项。 如下图就是一个菜单项和一个列表项。
9.1.1表单制作的初步知识
(9) 文件域 用户需要上传自己的文件，访问者可以通过输入需要 上传的文件的路径或者点击浏览按钮选择需要上传的文 件。文件域的代码为：<input type=“file” name=“fileField” id=“fileField” />。文件域和文本字段等的标签一样都是 <input>，它们主要是通过属性type进行区别的。文件域 如下图所示。
9.2.2表单验证的内容
Biblioteka Baidu
<script language="javascript"> function initSelector() { ……//此处省略了初始化下拉列表数据代码，详细代码请参照实例文件 } function isEmpty(text)//判断字符串是否为空 { if(text=="") return true; else return false;} function isEqual(text1,text2)//判断两字符串是否相同 { if(text1==text2) return true; else return false; }
9.1.1表单制作的初步知识
(7) 单选按钮组和复选框组 为了帮助网页设计者快速的设计单选按钮和复选按钮， Dreamweaver中还提供了单选按钮组和复选按钮组这两 个表单项。它们可以在可视化操作下快速的设计多个单 选按钮或复选框，大家可自行试验它们的用法。
9.1.1表单制作的初步知识
9.1.1表单制作的初步知识
((6)单选按钮 当需要访问者在待选项中选择惟一的答案时，就需要 用到单选框了。代码格式：＜input type=“radio” name=“...” value=“...”＞，单选按钮的name属性很重要， 因为要保证数据的准确采集，单选按钮都是以组为单位 使用的，在同一组中的单选项都必须用同一个名称。
上传照片 文件域 其它说明 文本区域(行数为8行)
提交注册 按钮(提交按钮) 清空表单 按钮(重置按钮)
9.1.2表单设计举例
表单中的出生年月后的列表项中填加的列表值的范围 从1900到2100，如果采用从列表属性面板中输入工作量 会很大。这里采用JavaScript配合dom定义一个函数来完 成列表选项值的初始化工作。在<body>的onload事件调 用这个函数。程序的代码为: <script language="javascript"> function initSelector() { var selector=document.getElementById("year");//获 取列表框对象，其id为"year"
9.1 表单设计
表单是网页设计中一个很重要的内容，它用于收 集不同类型的用户的输入信息。表单元素的功能需要 结合服务器程序与脚本语言才能发挥出作用。所以表 单主要用在动态网页设计中对数据进行采集。
9.1.1表单制作的初步知识 一个表单一般由两个部分构成。一个是表单标签<form>，另
一个是各种类型和功能的表单项。这些表单项中常用的有：文本字 段、隐藏域、文本区域、复选框、复选框组、单选按钮、单选按钮 组、列表/菜单、跳转菜单、图像域、文件域、按钮、标签等。
9.1.1表单制作的初步知识
(5)复选框 复选框允许在待选项中选中一项以上的选项。每个 复选框都是一个独立的元素，都必须有一个惟一的名称。 如网页注册中的爱好选项等。其HTML代码为: <input type="checkbox" name="…" id="…"/>。如图9.6所示即 为一组复选框表单项的使用。
9.1.1表单制作的初步知识 (2) 文本字段
文本字段是一种让访问者自己输入内容的表单对象，一般用来 填写较短的文字信息。如用户名、密码、Email地址等。 文本字段的HTML代码为<input type="text">。表单中许多表单项的 标签都为<input>具体属于哪个类型由属性type来指明。
在Dreamweaver中对表单的操作都可以通过可视化的界面进行。 选择“窗口”→“插入”菜单，打开“插入”工具栏，再单击“插 入”工具栏的“表单”项，就可以看到常用的表单项，如下图所示。
9.1.1表单制作的初步知识 (1) 表单
表单的HTML标签为<form></form>。它的功能是声明表单，定义 表单采集数据的范围，<form></form>之间的内容将来都有可能提 交给服务器。点击图9.1中的第一个选项表单，在代码视图中就会 发现自动添加了如下代码：<form id="form1" name="form1" method="post" action=""></form>。其中id属性和name属性在 JavaScript脚本程序中可以通过它们对表单及表单项进行访问。 methods属性表示提交表单的HTML方式，其值可为GET或POST。 POST方法在表单的主干包含名称/值对并且无需把名称/值对附加于 action特性的URL后； GET方法把名称/值对附加在action的URL后 面并且把新的URL送至服务器。action属性指定一URL，将来表单 提交时就会提交给该URL所指的网页，它一般是一个动态网页的地 址。
9.1.1表单制作的初步知识
(10) 按钮 表单按钮控制表单的运行，共有三种类型的按钮，提交 按钮、重置按钮和一般按钮。提交按钮的作用是将当前 表单中的内容提交给服务器。重置按钮的作用是清除表 单中的输入内容。一般按钮必须为其添加事件处理程序， 否则点击后不起任何作用。
9.1.2表单设计举例
9.1.1表单制作的初步知识
(8) 列表/菜单项 列表菜单项允许在一个有限的空间设置和选择多个选项。 如下图就是一个菜单项和一个列表项。
9.1.1表单制作的初步知识
(8) 列表/菜单项 列表菜单项允许在一个有限的空间设置和选择多个选项。 如下图就是一个菜单项和一个列表项。
9.1.1表单制作的初步知识
9.1.1表单制作的初步知识
(4) 文本区域 文本区域也是一种让访问者自己输入内容的表单对象，只不过能让 访问者填写较长的内容。代码格式：<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>。文本区域如图9.5 所示。cols属性定义多行文本框的宽度，单位是单个字符宽度。 rows属性定义多行文本框的高度，单位是单个字符宽度。
9.1.2表单设计举例
for(var i=1900;i<=2100;i++) { var t=document.createElement("option");//创建一个列 表值的option标签对象 t.text=i;//设置该标签的text属性为i try//通过异常处理来匹配各种浏览器 { selector.add(t,null); //将列表值对象加入列表框 对象(标准调用形式) } catch(ex) { selector.add(t); //将列表值对象加入列表框对象(IE调 用形式) } } } </script>