荔园在线
荔园之美,在春之萌芽,在夏之绽放,在秋之收获,在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: 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">
<!-- 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 位址!");
else alert("OK!");
}
// -->
</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软件 网络书店