表单作为网页中收集用户输入的主要界面，在Web开发中扮演着至关重要的角色。无论是数据收集、事务处理还是用户交互，表单几乎无处不在。通过JavaScript与表单对象的结合使用，开发者可以动态控制用户体验，实现诸如验证输入、异步提交数据等功能。本文将引导您了解如何使用JavaScript与表单对象进行交互，从而创建响应式更强、交互性更好的Web表单。
一、表单事件处理示例
下面是一个简单的HTML示例，展示了如何使用JavaScript来处理表单事件。该表单包含以下组件：
-
文本框用于输入“姓名”（First Name） -
文本框用于输入“姓氏”（Last Name） -
文本框用于输入“电子邮件地址”（Email Address） -
文本区域用于输入“评论”（Comments） -
按钮用于提交表单（Submit This Form）和重置表单（Reset this form）
示例代码
html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表单事件处理title>
<script>
// 检查字符串是否为空或仅包含空格
function IsBlank(s) {
var len = s.length;
for (var i = 0; i < len; i++) { // 循环检查每个字符
if (s.charAt(i) !== " ") {
return false; // 如果发现非空格字符则返回false
}
}
return true; // 全部为空格或为空字符串则返回true
}
// 验证姓氏字段
function validate_LastName() {
var str = document.form1.lname.value;
if (IsBlank(str)) { // 调用IsBlank函数检查是否为空
alert("姓氏字段不能为空");
return false; // 返回false阻止表单提交
}
return true; // 否则返回true允许表单提交
}
// 验证名字字段
function Validate_FirstName() {
var str = document.form1.fname.value;
if (IsBlank(str)) { // 调用IsBlank函数检查是否为空
alert("名字字段不能为空");
return false; // 返回false阻止表单提交
}
return true; // 否则返回true允许表单提交
}
// 验证电子邮箱地址
function Validate_Email() {
var str = document.form1.email.value;
if (IsBlank(str)) { // 调用IsBlank函数检查是否为空
alert("电子邮箱地址不能为空");
return false; // 返回false阻止表单提交
}
if (IsValid(str)) { // 使用IsValid函数进一步验证
return true;
}
return false; // 返回false阻止表单提交
}
// 验证电子邮箱地址格式
function IsValid(email) {
var str = email;
var len = str.length;
for (var i = 1; i < (len - 3); i++) { // 搜索@符号
if (str.charAt(i) === "@") {
return true; // 找到@符号则返回true
}
}
alert("请输入有效的电子邮箱地址"); // 提示错误
return false; // 返回false阻止表单提交
}
// 处理表单提交
function processForm() {
// 分别验证各个字段
if (!Validate_FirstName()) return false;
if (!validate_LastName()) return false;
if (!Validate_Email()) return false;
// 创建新窗口显示结果
var disp = window.open("", "result");
disp.document.write("感谢您的注册");
disp.document.write("名字\t\t:" + document.form1.fname.value + "");
disp.document.write("姓氏\t\t:" + document.form1.lname.value + "");
disp.document.write("电子邮箱地址\t\t:" + document.form1.email.value + "");
disp.document.write("您的评论\t\t:" + document.form1.comment.value + "");
//请求用户确认信息正确性
if (disp.confirm("信息是否正确？")) {
disp.close(); // 关闭窗口
}
}
script>
head>
<body>
<h2 align="center">处理表单事件h2>
<hr>
<form name="form1">
<p>名字: <INPUT TYPE="TEXT" NAME="fname" MAXLENGTH="10" ONCHANGE="Validate_FirstName()">
姓氏: <INPUT TYPE="TEXT" NAME="lname" MAXLENGTH="15" ONCHANGE="validate_LastName()">p>
<p>电子邮箱地址: <INPUT TYPE="TEXT" NAME="email" MAXLENGTH="30" ONCHANGE="Validate_Email()">p>
<p>评论: <TEXTAREA NAME="comment" ROWS="4" COLS="30" ONFOCUS="document.form1.comment.select()">请输入您的评论TEXTAREA>p>
<p align="center">
<input type="button" value="提交表单" ONCLICK="return processForm()">
<input type="reset" value="重置表单">
p>
form>
body>
html>结果
代码解释
-
IsBlank 函数检查一个字符串是否为空或只包含空格。 -
validate_LastName 和 Validate_FirstName 函数分别验证姓氏和名字字段是否为空。 -
Validate_Email 函数验证电子邮箱地址是否为空，并调用 IsValid 函数进一步验证格式。 -
IsValid 函数检查电子邮箱地址是否包含 @ 符号。 -
processForm 函数处理表单提交过程，包括验证各个字段以及在新窗口中显示结果。
表单功能概述
-
字段验证：确保“名字”和“姓氏”字段不为空；确保“电子邮箱地址”字段不仅不为空，且格式正确。 -
新窗口显示：提交表单后，在新窗口中显示填写的信息，供用户确认。 -
事件处理：使用 onchange 和 onclick 事件处理器来触发验证函数。
结论
这个HTML文档设计了一个用于收集用户信息的表单，利用JavaScript进行字段验证，确保所有字段都已正确填写，电子邮箱地址格式正确。表单通过一系列JavaScript函数实现，包括字段空值检查、电子邮箱地址格式验证等。如果所有字段均通过验证，则表单数据将在新窗口中显示供用户确认。这种方式提高了数据收集的可靠性和准确性，减少了常见的表单提交错误。
二、总结
此HTML文档集成了一个用户输入表单，用于收集名字、姓氏、电子邮箱地址及评论。通过JavaScript函数验证表单字段，确保没有字段被遗漏且电子邮箱地址格式正确。验证过程包括检查字段是否为空以及电子邮箱地址中是否包含 @ 符号。如果所有输入都有效，表单数据将在新窗口中显示以便用户审查和确认。这种设置增强了收集数据的可靠性和准确性，减少了常见表单提交错误的可能性。