BBS水木清华站∶精华区

发信人: afei (飞色精灵), 信区: Java
标  题: JavaScript(7)
发信站: BBS 水木清华站 (Mon Aug  4 09:06:36 1997)

发信人：新怪侠一枝梅             回信地址：Stephan.bbs@bbs.swjtu.edu.cn
信区名称：Java                     信件日期：01 Aug 1997 04:43:09
信件提要：[转载] JavaScript(7)
原发信站：锦城驿站
------------------------------------------------------------[1079/1093]-------
;37m【以下文字转载自 2mInternet 7m讨论区】
【原文由2m Stephan7m 所发表】m

                                           第七集

(转载与www.swjtu.edu.cn)



输入表单 (form) 对某些 Internet 上的网页而言是很重要的。通常 form 的输入内容
会被送回 server 中做处理。 JavaScript 具有确认输入值的功能，可以事先确保这些
值是属於 "合法的"，进而避免将错误的输入值送回 server。首先我将告诉您如何
对 form 的输入做确认的工作，再来我将会提到用 JavaScript 将资料送回 server 的可
能性。

咱们开始吧 ! 我先写一个简单的语法。在下面我加了两个 text- 元件 (element)，请
将您的大名写入第一个空格，并将您的 e-mail address 写入第二个空格。您可在这
两个空格中任意输入并按下按钮。您也可以不输入任何东西就按下按钮试试 !

请输入您的大名 :


请输入您的 e-mail address :


对第一个空格而言，若您没有键入任何东西，电脑便会出现一个错误讯息，并
请您再输入一次。当然，此空格会把任何输入的字串都视为 "合法的" 输入，它
无法辨认出您输入的名字是正确的或是胡　的。即始您输入的是数字，它也
会把此数字当成您的大名。例如您输入 '17'，它将会显示 '嗨 ! 17'。
第二个空格就设计得稍微复杂一点了。您可试着输入一个简单的字串 - 例如您
的大名，它将会显示错误讯息，并请您再输入一次 (除非您输入的字串含有 @
..)。这个空格的确认标准是检视您输入的字串中是否含有 @ 。即使只输入一
个 @，它也会被视为合法的输入 --- 虽然这也不是正确的 e-mail address。所有
Internet 的 e-mail address 皆含有 @ ，因此对 e-mail address 输入值做此种确认工作是很
适合的。

接下来看看上述功能的原始码吧 :

<html>
<head>
<script language="JavaScript">

</script>
</head>

<body>
<form name="first">
Enter your name:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="输入测试" onClick="test1(this.form)">
<P>
Enter your e-mail address:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="输入测试" onClick="test2(this.form)">
</body>

先看看 body- 之後的 HTML 语法。我们嵌入了两个 text 元件和两个按钮。第一个
按钮呼叫 test1(...)，第二个按钮呼叫 test2(...)。 this.form这个变数会将此 form 的名字
(在此例中就是 first) 传给函式 (function)，以便能正确将元件 "定址" (address)。
test1(form) 的功用在於检查您是否输入字串 (亦即检查是否为 "空字串") ? 此项工
作是由 if(form.text1.value == "")... 所执行。 'form' 这个变数将会接收由 'this.form' 所传来
的值。但我们如何在 test1(...) 中抓取我们所输入的字串呢?您可利用 'value' 这个变
数再加上 'form.text1' 来抓所输入的字串。然後将它和 " " 比较，检查是否为 "空字
串"。若是 "空字串" 则表示并无输入任何东西，那麽 Netscape 将会出现警告并要
求您再输入一次。若 test1(...) 检查结果并非 "空字串"，则会出现 "您已输入完成 !"
的讯息。请注意，即使只输入一个空白 (space)， test1(...)也会将之视为合法输入。
当然，您也可以略施小技来排除上述可能性，我相信这很容易。
现在请看 test2(form)。在此函式中我们利用相同的方法来检测输入值是否为空
字串，但是我在 if- 指令中加入了额外的检测功能。 || 这个符号代表 OR 运算子
(operator)，您可在第六章中学习它的用法。
if- 指令用来检测第一与第二个比较式是否其中之一为 "真"?若有其中之一为
"真"，则整个 if- 指令即为 "真"，如此便会执行其後的指令。换句话说，若您没有
输入任何字串或您输入的字串中没有包含 '@'，均会被视为 "不合法" 输入。




您知到有几种方法可用来送出 form 的内容吗?最简单的方法就是利用 e-mail 来送
出 form 的内容。我下面介绍的方法就是属於这一种。若您不想利用 e-mail 来送
出 form 的内容且想让 server 能自动处理 form 的输入值，此时此刻只有 CGI 能做得
到。譬如您想做一个类似 Yahoo 可以让使用者迅速得到结果的搜寻引擎 (search
engine)，您就必须使用 CGI。如此一来使用者才不需等待系统管理者处理 form 的
输入值，而可由 server 自动处理并迅速将处理结果报告给使用者。目前 JavaScript
无法达到此种功能。即使您想制做一个 "访客签名簿" (guestbook)，也不可能利用
JavaScript 来叫 server 自动将资料加入网页中。目前只有 CGI 能做到如此。但您可
以制做一个利用 e-mail 传送使用者资料的 guestbook，只是您需以手动 (manual) 方式
来处理使用者所传来的资料。若您一天不是收到很多使用者送来的资料的
话，这也未尝不可。
以下语法只使用到普通的 HTML 语法，并不需用到 JavaScript ! 只有当您想在资料
送出前做一些确认工作的话，才需用到 JavaScript。虽然目前有些浏览器无法使
用 mailto- 这项指令，我相信较新版的浏览器都会支援这个指令。

<FORM METHOD=POST ACTION="">your_mailto:email@goes.here">
<H3>您喜欢我的网页吗 ?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">一点也不喜欢。<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>简直浪费我的时间。<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">这简直是 Net 上最烂的站台。<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>

上述语法可藉由 e-mail 收到使用者对您网页的观感。唯一的困扰是您可能会收
到内容类似密语 (cryptic) 的 mail。 mail 内容的空格 (space) 有时会以 '+' 代替，有时会
以 '%20' 代替。看+起+来+ 就+像+这+样。我相信网路上应有某种程式可将收到的
mail 转换成 "可读" 的语句。




另外有一种不错的应用可使您的表单输入更具 "亲和性" (user-friendly)。您可以指
定一开始先"定焦" (focus)於哪个元件 (element，简单的说就是输入项)。或是您可让
浏览器 "定焦" 於使用者输入错误的表单。换句话说，浏览器将会把 mouse 的游
标放在您 "定焦" 的元件上，如此一来使用者便不需在输入字串之前按一下
mouse。请看这项功能的原始码 :

function setfocus() {
        document.first.text1.focus();
        return;
}

这项语法是将 "定焦" 放在第一个 text- 元件上 (以本章为例，就是在 "请输入您的
大名" 的空格中有游标在闪烁)。您必需在语法中指定您想 "定焦" 的表单名字 (以
本章为例，就是 first) 和元件的名字 (以本章为例，就是 text1)。若您在一开始载
入网页时就想 "定焦" 於某个元件上，只要在 <body>- tag 中利用 onLoad- 即可 :

<body onLoad="setfocus()">


--
9m  dMMMMM  NdMPOdMP dMMMMMP dMP dMP dMMMMMP
  dMP"     dMP    dMP     dMP dMP dMP             V
   VMMM   dMP    dMMMP   dMP dMP dMMMP          (mo o0m)
dP .dMP  dMP    dMP      YMvAP" dMP            (  V  )
VMMMP  dMP    dMMMMMP    VP"  dMMMMMP    .......m.m........
� �

;36m※ 修改:．Stephan 于 Jul 30 13:47:56 修改本文．[FROM: 202.115.66.123]m
m;34m※ 来源:．锦城驿站 bbs.swjtu.edu.cn．[FROM: 202.115.66.123]m

m;32m※ 转载:．锦城驿站 bbs.swjtu.edu.cn．[FROM: 202.115.66.121]m

<<<信件结尾>>>

--
※ 来源:·BBS 水木清华站 bbs.net.tsinghua.edu.cn·[FROM: curie.eps.jhu.e]