JavaScript学习 第 七 章

第 七 集

---

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