● (转贴)JavaScript 简介(第 7 集) - 荔园在线 | 深圳大学学生论坛,荔园晨风BBS,深大在线网站

荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀

发信人: hbo (H.B.), 信区: Java
标  题: (转贴)JavaScript 简介(第 7 集)
发信站: 深大荔园晨风站 (Thu Mar 12 09:43:22 1998), 转信

寄信人: VINCENT
标  题: (转贴)JavaScript 简介(第 7 集)
发信站: 华南理工大学 BBS木棉站
日  期: Tue Oct 15 19:12:30 1996

输入表格对某些全球资讯网上的文件而言是相当重要的。输入的内容常常

是必须送回伺服端 Server 去加以处理的。 JavaScript
可以在这些输入资料

被送回伺服端之前先加以确认修正。

　　我们先来看看如何对输入格式做确认的工作，然後再告诉你如何以

JavaScript 或 HTML
的方式将输入的资料送回。首先我们们制作一个简单

的语法，使 HTML 的文件中包含两个文字(text) 型态的输入元件。
让使

用者可以将他的名字及 E-mail
位址分别填入第一和第二个框中。以下的

文字，输入元件中，你可以填入随意值，然後按一下按钮，你也可以不

填任何东西就直接按按钮看看有何结果。

请输入你的姓名:

请输入你的电子邮箱 E-mail 位址:

第一个框框中；你如果没有输入任何文字的话，你会收到一个错误讯息

，不过若在此只要有输入任何文字，就是正确合法了。当然，这并不保

证你输入的名字一定是正确的字。数字也能为它接受，所以你如果输入

'17'，你就会看到 " 嗨！17"。

第二个框框中的内容就比较复杂些了，
如果你输入的一个字串，例如∶

你的名字，那可能就无效 ( 除非你的名字当中有一个 @ 符号
)。能够被

接受为一个正确的 Email 位址的主要依据是要有一个 @。
因为每一个

E-mail 位址中均有一个
@的符号，拿它来做辨识符号是再恰当不过的了。

确认这两个文字输入格式的语法应该长得如何呢？以下就是我们的写法∶

<html>

<head>

<script language="JavaScript">



</script>

</head>

<body>

<form name="first">

请输入你的姓名:

<input type="text" name="text1">

<input type="button" name="button1" value="检查输入" onClick="test1(this.form)">

请输入你的电子邮箱 E-mail 位址:

<input type="text" name="text2">

<input type="button" name="button2" value="检查输入" onClick="test2(this.form)">

</body>

对於以上的语法，我们先解释 HTML 部分的 body
区段。在这区段之中我

们制作了两个文字输入框的元件以及两个按钮。两个按钮会视那一个钮

被接而分别去呼叫 test1(......) 或 test2(......) 的函数，然後我们传入
this.form

这个参数给函数告诉它所要处理的元件。

　　函数 test1(form) 是用来测试字串是否是空字串，这可以透过

                  if (form.text1.value == "") . . . 来完成，

from 这个变数会接受由呼叫函数时外部所传来的 'this.form' 值。透过
form.text1

的语法可以轻易的得到第一个输入框中的值，然後拿它来与〃〃比较，就

可以知道输入值是否为完整字串了。如果是的话，那就会得到一个错误的

讯息，否则就会告诉你输入成功！

　　在此会有另一个问题发生，那就是当我们的输入是空白字元的话（也

就是只按 space
），那也会被当成是合法的输入，因为空白字串和空字串

是不同的。当然，如果你愿意的话，你也可以将这些情形列入检查的考虑，

并把这样的状况排除在正确输入之外。这应该不难才是！

　　接著来看看第二个函数 test(form)，
这个函数首先也先检查看看是否输入

字串〃〃以确定有无输入值，除此之外我们又加了一些东西到 if
的指令中，

|| 是 OR 的运算符号，在第 6
集之中己经有介绍过了。第二个部份就是检查看

看字串中是否有包含 @ 的符号！

　　if 的指令会检查第一个或第二个条件成立的话，那 if
便成立，於是就会执

行接下来的指令。反过来
，如果字串是空的或字串中不含@的符号，那就会

得到错误的讯息。

接著要将输入内容传回伺服端有那些不同的方式呢?
最简单的方法就是

利用 E-mail
将输入内容传回来。这个方法等一下我们会介绍得详细一点。

而如果不利用 E-mail
而希望伺服端能够自动处理传送回来资料的，那就

要使用 CGI 了。例如∶若要像 Yahoo
一样能够由输入的资料中很快的透

过搜寻引擎得到结果的话，那就得使用 CGI
的方式才行，这样才不必等

到伺服端的维护员来看到你的讯息才加以回应。在这一点上
JavaScript 目

前还没有办法做到像 CGI 一样。甚至你无法用 JaraScript
去建立一个类似

目前很流行的访客留言簿，使这讯息自动的存在 HTML
文件中，这也是

CGI 才做得到！当然，你也可以 E-mail
的方式用人工来制作这样的留言簿。

不过，这样当然是费时费事，你可不太愿意一天处理个上百篇或上千篇的

邮件吧！

以下的语法只有 HTML，不必用到
JavaScript。不过，若你想要在送信之

前确认一该信的内容了，你当然就需要 JavaScript
了。在语法中我们所

加上的 mailto
指令并非在每种浏览器均能使用，但近一点的浏览器则应

该都会提供。

<FORM METHOD=POST ACTION="mailto:your_email@goes.here">

Do you like this page?

  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Not at all.

  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Waste of time.

  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">Worst site of the Net.

  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">

</FORM>

你将可以由以上的语法经由 E-mail
得到回应。不过，你会发现在你所

收到 mail
中可能会发现内部有被编过码的问题发生。有些可会将空格

以 ' ' 代替。有些可能是以 ' 20%' 来代替。
所以看起来可能会像这样∶

                           So this might look like this

这是由於 http
本身传送前编码的关系，我们相信网路上应该有使收到

信件的格式变好看一点的过滤程式存在。

另外，有个小技巧可以使你的输入介面更加好用且较具亲和力。那就是

你可以定那一个元件是首先被选取的，或告诉浏览器去选取使用者填错

的格式元件。这也就是说浏览器可以直接将游标停格在指定的表格上，

这样就可以省掉使用者再去滑鼠选取表格元件的工作了。我们可以用以

下的语法来指定∶

function setfocus() {

        document.first.text1.focus();

        return;

}

以上的语法将会选取第一
文字输文件。在此你必须指定表格的全名，

这儿是叫 first，以及输人元件的名称－
test1。另外，如果你要文件被读

入时就选取该元件的话，可以在文件的 <body> 标记内加入 onLoad
的

property，如下∶
<body onLoad="setfocus()">

第 7 集完

--
※ 来源:．深大荔园晨风站 bbs.szu.edu.cn．[FROM: 202.192.140.143]

荔园在线首页友情链接：深圳大学深大招生荔园晨风BBS S-Term软件网络书店