第六部分：表单

输入的确认

　　在Internet上表单被广泛的使用，输入的结果被传送到服务器或通过e-mail 传送到一个特定的mail帐户。但你如何知道一个输入的结果是符合规定的呢？通过使用Javascript可以在结果被传送前检查它。首先我想示范单但是如何被确认的，然后我们来看一看如何通过Internet 来传送信息。

　　首先我们来写一段简单的代码，这个HTML页将包括两个文本元素。用户必须在第一个中写下他的名字，在第二个里写下他的e-mail地址。你可以试着在表单里填任何东西，也可以不填，然后按下按钮。

　　在第一个输入框中如果你什么也没有输入的话，你会得到一个返回的错误信息。它只接受合理的输入，当然，它并不能防止你输入一个错误的名字。浏览器也接受输入数字，所以如果你输入17的话，你会得到一个“Hi,17”的回应，所以这并不是一个完善的检查。
　　第二个输入框比较好一点。输入一个简单的字符串，比如说你的名字，你会得到一个错误信息，（除非你的名字中有一个@符号）。作为输入确认为是合法e-mail的标准是@符号。一个单独的@符也会被通过，不过这当然并无意义。每一个Internet e-mail地址都有一个@符，所以在这里检查@符的存在是恰当的。

　　那么生成这两个输入框以及输入确认的源代码是怎样的呢？下面就是：

<html>
<head>
<script language="JavaScript">
<!-- Hide

function test1(form) {
  if (form.text1.value == "")
    alert("Please enter a string!")
  else { 
   alert("Hi "+form.text1.value+"! Form input ok!");
  }
}

function test2(form) {
  if (form.text2.value == "" || 
      form.text2.value.indexOf('@', 0) == -1) 
        alert("No valid e-mail address!");
  else alert("OK!");
}
// -->
</script>
</head>

<body>
<form name="first">
请输入你的名字:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="测试输入" onClick="test1(this.form)">
<P>
请输入 e-mail地址:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="测试输入" onClick="test2(this.form)">
</body>

　　首先我们来看一看body部分的HTML代码。我们在这儿生成了两个文本输入框和两个按钮。按钮根据那个按钮被按下分别调用了两个函数test1(...)或test2(...)。我们通过 this.form 来给函数传递正确的参数。
　　函数 test1(form)是用来测试字符串是否为空值的。它是通过 via if (form.text1.value == "")...来实现的。 'form' 是在函数调用中 'this.form'的值。我们通过联合使用“value”和form.text1来取得输入框中的输入值，同时通过和“”作比较来确定输入的不是空值。如果输入的字符串为“”那就说明没有输入。用户会得到一个返回的错误信息。如果有输入用户会得到一个正确的返回信息。
　　这儿的问题是用户会输入空格。这会被视为一个正确的输入！当然，如果你愿意的话你能够检查这些可能同时排除它们。我想通过上面的信息你能够很容易的做到这一点。
　　现在来看一看test2(form)函数。这个函数也是用来比较输入值，以确定输入的不是空值。不过我们在IF 命令中增加了一些东西：或操作符 ||。你在本简介的第六部分已经学过它了。
　　IF 命令检查它的前后，如果有一个是为真值的话，那么整个操作返回真值，将继续执行它下面的命令。这也就是说在这儿，如果你输入一个空值，或字符串中没有@的话，你会得到一个返回的错误信息。

检查特定的字符

　　有时候你必须在表单的输入中做一些限制，就象电话号码，你需要的只是数字。我们能够检查输入是否是数字，但很多人的电话号码中有特殊的字符，象： 01234-56789, 01234/56789 或 01234 56789 (这中间有个空格)。你不能强迫用户在电话号码中不加入特殊的字符，所以我们必须使我们的代码能够检查数字和一些特殊的字符。下面的例子是一个演示：

这儿是源代码：

<html>
<head>
<script language="JavaScript">
<!-- hide

// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
//     http://rummelplatz.uni-mannheim.de/~skoch/js/ 
//       JS-book: http://www.dpunkt.de/javascript
//    You can use this code if you leave this message
// ******************************************************

function check(input) {
  var ok = true;

  for (var i = 0; i < input.length; i++) {
    var chr = input.charAt(i);
    var found = false;
    for (var j = 1; j < check.length; j++) {
      if (chr == check[j]) found = true;
    }
    if (!found) ok = false;
  }
 
  return ok;
}

function test(input) {

  if (!check(input, "1", "2", "3", "4",
        "5", "6", "7", "8", "9", "0", "/", "-", " ")) {

    alert("Input not ok.");
  }
  else {
    alert("Input ok!");
  }
}

// -->
</script>
</head>

<body>
<form>
Telephone:
<input type="text" name="telephone" value="">
<input type="button" value="Check"
  onClick="test(this.form.telephone.value)"> 
</form>
</body>
</html>

　函数 test() 指定了那些可用的字符。

输入的递交

　　输入最简单的递交方法是通过 e-mail. 如果你想要服务器来处理输入，那你就需要通过 CGI( Common Gateway Interface)。它可以让你自动处理表单输入，比如服务器后建立一个数据库来接收用户的输入。另一个例子是Yahoo的索引页。那上面有一个输入框，可以让你搜索他们的数据库。用户在按了递交键后很快可以得到回应。他不必等到管理服务器的人看到他的输入，然后为他找出所需要得信息。这是由服务器自动完成的。Javascript不能做这样的事。
　　你不能使用javascript来生成留言簿，因为Javascript不能在服务器上写一个文件。你只能通过CGI 来做这件事。当然你能为给你e-mail的人建立一个留言簿，但你必须手工输入用户反馈。当然如果你不是一天受到1000个反馈邮件的话，这是完全可行的。
　　这儿的代码是纯HTML，所以这儿不需要Javascript。除非你想在表单被递交前检查它的内容。我必须说明这儿的mailto命令在Internet Explorer 3.0中并不被支持。

<FORM METHOD=POST ACTION="mailto:your.address@goes.here" enctype="text/plain">
<H3>Do you like this page?</H3>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Not at all.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Waste of time.<BR>
  <INPUT NAME="choice" TYPE="RADIO" VALUE="3">Worst site of the Net.<BR>
  <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Send">
</FORM>

　　enctype="text/plain" 部分是指定只传送纯文本而不要编码部分，这使传送来的mail 可读性更好。

　　如果你想在表单被传送前检查它的内容，你可以使用onSubmit 事件处理器，你必须把这个事件处理器放在 <form>符号中，就象这样：

function validate() {
  // check if input ok
  // ...

  if (inputOK) return true
    else return false;
}

...

<form ... onSubmit="return validate()">

...

　　运用以上代码你就可以在表单内容被传送前检查它的内容。

如何处理特定元素

　　通过使用focus() 方法，你可以使你的表单对用户更加友好，你可以把光标聚焦在特定的元素上或在输入出错后把光标聚焦在错误的输入上。这也就是说，浏览器会把光标放在特定的表单单元上，这样用户就不必在输入前利用单击来定位。你可以利用下面的代码来实现：

function setfocus() {
  document.first.text1.focus();
}

这段代码会聚焦在第一个文本元素上，你必须给整个表定义一个名字：在这儿叫 first, 而那个表单元素叫：text1。如果你想在表单一被载入时就聚焦到这个单元，那你只需在 <body> 标记符中使用 onLoad 特性，就象这样：

<body onLoad="setfocus()">

我们利用这段代码来扩展它的功能：

function setfocus() {
  document.first.text1.focus();
  document.first.text1.select();
}

试试这段代码：

你可以看到光标聚焦到了文本元素上，输入被选择了。