```

在这个例子中，表单执行了validateForm()函数。如果这个函数返回true，则表单将被提交；如果它返回false，则表单提交被取消。

2.2 onfocus事件

onfocus事件在表单元素获得焦点时触发。我们可以使用它来执行某些操作，例如自动填充或清空文本框。

例如：

```

```

这个文本框上的onfocus事件将在用户点击文本框时将其清空，使用户可以输入自己的名字。

2.3 onblur事件

onblur事件在表单元素失去焦点时触发。我们可以使用它来检查表单输入等。

例如：

```

```

在这个例子中，onblur事件将触发checkPhone()函数，它将检查用户是否输入了有效的电话号码。

3. 如何使用JavaScript实现表单提交

现在我们已经了解了JavaScript表单的基础知识和一些常用的事件处理程序，下面我们将介绍如何使用JavaScript实现表单提交。

3.1 检查表单数据

在提交表单之前，我们应该始终检查表单数据是否有效。我们可以使用JavaScript来检查表单数据。以下是一个检查表单数据的JavaScript函数的示例：

```

function validateForm() {

var name = document.forms["myForm"]["name"].value;

var phone = document.forms["myForm"]["phone"].value;

if (name == "") {

alert("Name must be filled out");

return false;

}

if (phone == "") {

alert("Phone must be filled out");

return false;

}

}

```

这个函数检查表单中的“name”和“phone”字段是否为空。如果字段为空，则函数将弹出警告框并返回false。在onsubmit事件处理程序中调用此函数。

3.2 使用XMLHttpRequest对象提交表单数据

在我们检查表单数据的过程中，我们可以使用XMLHttpRequest对象来提交表单数据。以下是使用XMLHttpRequest对象提交表单数据的JavaScript代码的示例：

```

function submitForm() {

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

alert("Form submitted successfully!");

}

};

xmlhttp.open("POST", "submit-form.php", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

var name = document.forms["myForm"]["name"].value;

var phone = document.forms["myForm"]["phone"].value;

xmlhttp.send("name=" + name + "&phone=" + phone);

}

```

在这个例子中，当表单提交时，submitForm()函数将在XMLHttpRequest对象中打开一个POST请求，并将“name”和“phone”字段的值发送到服务器。当xmlhttp.readyState == 4和xmlhttp.status == 200时，表示表单已经成功提交并收到响应。

3.3 防止表单重复提交

表单重复提交是常见的问题，可能导致数据不一致和其他问题。通过禁用表单以避免重复提交，可以避免这种情况。以下是JavaScript代码示例：

```

function submitForm() {

var form = document.forms["myForm"];

if (form.submitting) {

return false;

}

form.submitting = true; // 禁用表单

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

alert("Form submitted successfully!");

form.submitting = false; // 启用表单

}

};

xmlhttp.open("POST", "submit-form.php", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

var name = form["name"].value;

var phone = form["phone"].value;

xmlhttp.send("name=" + name + "&phone=" + phone);

}

```

在这个例子中，我们将submitting属性用于禁用表单，在onreadystatechange事件处理程序中启用表单。

4. 结论

使用JavaScript实现表单提交是一个必不可少的技能，可以将您的网站从静态网页变成动态网页。我们学习了JavaScript表单的基础知识，以及如何使用事件处理程序来处理表单事件。我们还学习了如何检查表单数据、使用XMLHttpRequest对象提交表单数据以及防止表单重复提交。现在您已经掌握了JavaScript表单提交的基础知识，可以在您的网站上实现类似的功能了。