好了，我又回来了！现在开始进行表单提交方面的讨论。
我们一般会在提交前对访问者提供的表单进行验证后才把它们添加到数据库或进行别的处理。考虑到网速，服务器性能方面的问题，如果单纯的在服务器端验证，那么对用户来说是一个很漫长的过程，相信大多数的朋友都会在你的表单页设置javascript来对即将提交的表单进行验证吧！
原理是：在提交表单的时候我们又接触到一个新的事件容器：onSubmit(""),在这里，我们调用已经写好的javascript脚本对即将提交的表单进行简单的验证，如果条件符合的时候就会返回true值，否则就返回false这时候，表单将停止提交。
先来看看一个简单的例子：
<html>
<head>
<title>Feedback</title>
<script>
function isReady(form) {
if (form.message.value != "") {
return true;
}
else {
alert("Please include a message.");
form.message.focus();
return false;
}
}
</script>
</head>
<body>
<h1>Send Us A Message</h1>
<form name="feddbackForm" onSubmit="return isReady(this);" method="post" actiong="
messageform.asp">
<p><textarea name="message" rows="6" cols="20" wrap="wrap"></textarea></p>
<p><input type="submit" value="submit">
<input type="reset" value="Reset"></p>
</form>
</body>
</html>
让我们来仔细分析一下这个文件：
1：当用户按下“submit”按钮的时候，开启事件容器onSubmit，调用isReady()函数，并传递当前表单。即：return isReady(this)，this的用法我们一会再进行单独说明。
2：调用函数isReady()，如果表单中的message元素（也就是名为message的文本区域）的值不为空，也就是说用户填写了内容：if (form.message.value != "")那么，函数就将返回一个true值，否则，alert()方法将弹出一个消息框，提示出错原因。当用户点击了消息框上的“确定”按钮时（也没别的按钮可按！），脚本把焦点转到主窗口的文本输入区域：form.message.focus();focus()方法内置于大多书的表单元素，，这样可以让访问者方便地修改填写的内容。最后，函数返回false值。
3：事件容器得到的函数返回值是true时，将继续提交，反之停止提交。
这里就讲一下this，在这个例子中，表单用this把自己传递给函数isReady()。换句话说，因为我们位于表单内，所以可以用this引用表单。
而在上一讲的脚本中，我们用全名来访问个个文本输入取的值（例如：document.madlibs.input1.value）。为什么不用this呢？这是因为必须在一个对象内部才能用this引用本身。在makeMadlibs()函数中，我们并不在任何的对象内部，所以this没有意义。
然而，稍微想一下，我们就可以用短一些的名字来访问输入值。makeMadlibs()函数在表单按钮的onClick事件处理器中被调用。在那个事件处理器里，我们可以用this引用按钮，更重要的是，我们可以用this.form引用包含按钮的表单。因为每个表单元素都有一个form属性来表示包含这个元素的表单。因此，从创建按钮的<input>标签中开始，this.form就等价于document.madlibs。
那我们就从新写一下上一讲的函数：
首先我们需要重新写一个只有唯一参数（包含它的表单）的makeMadlibs()。下边是新函数的一部分：
function makeMadlibs(form) {
var story="<html>...."+....+
........
form.input1.value + ",lend me your" +
........
}
我们已经把上一 级的表单传递给函数makeMadlibs(),储存在变量form中。所以我们可以用form.input1.value访问第一个输入值，等价于document.madlibs.input1.value。
当然，为了完成这个任务，我们还需要改变调用函数的方式：
<input type="button" value="Create Story" onClick="makeMadlibs(this.form);">
除了减少了输入的工作量之外，更重要的是它忽略真正表单的名字而仍然正常运行。
需要理解这个技术的原因在于，现在大多数的脚本都在它们的表单中应用这种技术。如果你想像大多数人那样，通过研究例子来学习脚本，这将会使你进一步理解this。
看了上面的长篇大论是否有点头晕？简单点就是下面这个脚本和我们这一讲一开始写的那个脚本所完成的任务一样：
<html>
<head>
<title>Feedback</title>
<script>
function isReady() {
if (document.feddbackForm.message.value != "") {
return true;
}
else {
alert("Please include a message.");
document.feddbackForm.message.focus();
return false;
}
}
</script>
</head>
<body>
<h1>Send Us A Message</h1>
<form name="feddbackForm" onSubmit="return isReady();" method="post" actiong="
messageform.asp">
<p><textarea name="message" rows="6" cols="20" wrap="wrap"></textarea></p>
<p><input type="submit" value="submit">
<input type="reset" value="Reset"></p>
</form>
</body>
</html>
好了，自己试着把上一讲的脚本重新写一遍，要写成用this的形式的哦！大部分我们都已经写了出来，你所要做的就是熟悉它！ |
