⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 javascript简介(7).txt

📁 搜集的很多javascript实例及教程
💻 TXT
字号:
🔍 
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()">

--------------------------------------------------------------------------------

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -