您的位置：寻梦网首页＞编程乐园＞JavaScript＞Javascript 教程篇
第 1 集 第 2 集 第 3 集 第 4 集 第 5 集 第 6 集 第 7 集

Javascript教程篇

第 7 集


输入表单(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">
<!-- 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:your_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()">