|
1jJavaScript
第 七 集
输入表单(form)对某些Internet上的网页而言是很重要的。通常form的输入内容会被送回server中做处理。JavaScript具有确认输入值的功能，可以事先确保这些值是属於"合法的"，进而避免将错误的输入值送回server。首先我将告诉您如何对form的输入做确认的工作，再来我将会提到用JavaScript将资料送回server的可能性。
咱们开始吧!我先写一个简单的语法。在下面我加了两个text-元件(element)，请将您的大名写入第一个空格，并将您的e-mail
address写入第二个空格。您可在这两个空格中任意输入并按下按钮。您也可以不输入任何东西就按下按钮试试!
对第一个空格而言，若您没有键入任何东西，电脑便会出现一个错误讯息，并请您再输入一次。当然，此空格会把任何输入的字串都视为"合法的"输入，它无法辨认出您输入的名字是正确的或是胡 的。即始您输入的是数字，它也会把此数字当成您的大名。例如您输入'17'，它将会显示'嗨!
17'。
第二个空格就设计得稍微复杂一点了。您可试着输入一个简单的字串-例如您的大名，它将会显示错误讯息，并请您再输入一次(除非您输入的字串含有@
...)。这个空格的确认标准是检视您输入的字串中是否含有@。即使只输入一个@，它也会被视为合法的输入---虽然这也不是正确的e-mail
address。所有Internet的e-mail address皆含有@，因此对e-mail
address输入值做此种确认工作是很适合的。
接下来看看上述功能的原始码吧 :
<html>
<head>
<script language="JavaScript">
<!-- Hide
function test1(form) {
if (form.text1.value == "")
alert("您 没 写 上 任 何 东 西， 请 再 输 入 一 次 !")
else {
alert("嗨 "+form.text1.value+"! 您 已 输 入 完 成 !");
}
}
function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("这 不 是 正 确 的 e-mail address! 请 再 输 入 一 次 !");
else alert("您 已 输 入 完 成 !");
}
// -->
</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="mailto:[email protected]">
<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()">
|
