首页 » JavaScript DOM » JavaScript 表单

JavaScript 表单

摘要：在本教程中，您将学习有关 JavaScript 表单 API 的知识：访问表单、获取元素的值、验证表单数据以及提交表单。

表单基础知识

要在 HTML 中创建表单，可以使用<form>元素

<form action="/signup" method="post" id="signup"> 
</form>Code language: HTML, XML (xml)

<form>元素有两个重要的属性：action和method。

  • action属性指定将处理表单提交的 URL。在此示例中，操作是/signup URL。
  • method属性指定用于提交表单的 HTTP 方法。通常，方法是post或get。

通常，当您想从服务器检索数据时使用get方法，而当您想更改服务器上的数据时使用post方法。

JavaScript 使用HTMLFormElement对象来表示表单。HTMLFormElement具有以下与 HTML 属性相对应的属性

  • action - 是处理表单数据的 URL。它等效于<form>元素的action属性。
  • method - 是 HTTP 方法，它等效于<form>元素的method属性。

HTMLFormElement元素还提供了以下有用的方法

  • submit() - 提交表单。
  • reset() - 重置表单。

引用表单

要引用<form>元素，可以使用 DOM 选择方法，例如getElementById()

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

HTML 文档可以包含多个表单。document.forms属性返回文档上表单的集合（HTMLFormControlsCollection）

document.formsCode language: JavaScript (javascript)

要引用表单，请使用索引。例如，以下语句返回 HTML 文档的第一个表单

document.forms[0]Code language: CSS (css)

提交表单

通常，表单有一个提交按钮。单击它时，浏览器会将表单数据发送到服务器。要创建提交按钮，请使用<input>或<button>元素，类型为submit

<input type="submit" value="Subscribe">Code language: HTML, XML (xml)

或者

<button type="submit">Subscribe</button>Code language: HTML, XML (xml)

如果提交按钮具有焦点并且您按下Enter键，浏览器也会提交表单数据。

提交表单时，submit事件将在请求发送到服务器之前触发。这使您有机会验证表单数据。如果表单数据无效，您可以停止提交表单。

要将事件侦听器附加到submit事件，请使用表单元素的addEventListener()方法，如下所示

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});Code language: JavaScript (javascript)

要阻止表单提交，请在submit事件处理程序中调用event对象的preventDefault()方法，如下所示

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});Code language: PHP (php)

通常，如果表单数据无效，您会调用event.preventDefault()方法。要在 JavaScript 中提交表单，请调用表单对象的submit()方法

form.submit();Code language: CSS (css)

请注意，form.submit()不会触发submit事件。因此，在调用此方法之前，您应该始终验证表单。

访问表单字段

要访问表单字段，可以使用 DOM 方法，例如getElementsByName()、getElementById()、querySelector()等。

此外，您还可以使用form对象的elements属性。form.elements属性存储表单元素的集合。

JavaScript 允许您通过索引、ID 或名称访问元素。假设您有以下包含两个<input>元素的注册表单

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

要访问表单的元素，请先获取表单元素

const form = document.getElementById('signup');Code language: JavaScript (javascript)

并使用索引、ID 或名称访问元素。以下访问第一个表单元素

form.elements[0]; // by index
form.elements['name']; // by name
form.elements['name']; // by id (name & id are the same in this case)Code language: JavaScript (javascript)

以下访问第二个输入元素

form.elements[1]; // by index
form.elements['email']; //  by name
form.elements['email']; // by idCode language: JavaScript (javascript)

访问表单字段后，可以使用value属性访问其值，例如

const form = document.getElementById('signup');
const name = form.elements['name'];
const email = form.elements['email'];

// getting the element's value
let fullName = name.value;
let emailAddress = email.value;Code language: JavaScript (javascript)

将所有内容整合在一起：注册表单

以下说明了包含注册表单的 HTML 文档。 在此处查看实时演示。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>JavaScript Form Demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="container">
			<form action="signup.html" method="post" id="signup">
				<h1>Sign Up</h1>
				<div class="field">
					<label for="name">Name:</label>
					<input type="text" id="name" name="name" placeholder="Enter your fullname" />
					<small></small>
				</div>
				<div class="field">
					<label for="email">Email:</label>
					<input type="text" id="email" name="email" placeholder="Enter your email address" />
					<small></small>
				</div>
				<div class="field">
					<button type="submit" class="full">Subscribe</button>
				</div>
			</form>
		</div>
		<script src="js/app.js"></script>
	</body>
</html>
Code language: HTML, XML (xml)

HTML 文档引用了style.css和app.js文件。它使用<small>元素在<input>元素具有无效数据的情况下显示错误消息。

在不提供任何信息的情况下提交表单将导致以下错误

使用姓名但电子邮件地址格式无效提交表单将导致以下错误

以下显示了完整的app.js文件

// show a message with a type of the input
function showMessage(input, message, type) {
	// get the small element and set the message
	const msg = input.parentNode.querySelector("small");
	msg.innerText = message;
	// update the class for the input
	input.className = type ? "success" : "error";
	return type;
}

function showError(input, message) {
	return showMessage(input, message, false);
}

function showSuccess(input) {
	return showMessage(input, "", true);
}

function hasValue(input, message) {
	if (input.value.trim() === "") {
		return showError(input, message);
	}
	return showSuccess(input);
}

function validateEmail(input, requiredMsg, invalidMsg) {
	// check if the value is not empty
	if (!hasValue(input, requiredMsg)) {
		return false;
	}
	// validate email format
	const emailRegex =
		/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

	const email = input.value.trim();
	if (!emailRegex.test(email)) {
		return showError(input, invalidMsg);
	}
	return true;
}

const form = document.querySelector("#signup");

const NAME_REQUIRED = "Please enter your name";
const EMAIL_REQUIRED = "Please enter your email";
const EMAIL_INVALID = "Please enter a correct email address format";

form.addEventListener("submit", function (event) {
	// stop form submission
	event.preventDefault();

	// validate the form
	let nameValid = hasValue(form.elements["name"], NAME_REQUIRED);
	let emailValid = validateEmail(form.elements["email"], EMAIL_REQUIRED, EMAIL_INVALID);
	// if valid, submit the form.
	if (nameValid && emailValid) {
		alert("Demo only. No form was posted.");
	}
});

Code language: JavaScript (javascript)

它是如何工作的。

showMessage()函数

showMessage()函数接受一个输入元素、一条消息和一个类型

// show a message with a type of the input
function showMessage(input, message, type) {
	// get the <small> element and set the message
	const msg = input.parentNode.querySelector("small");
	msg.innerText = message;
	// update the class for the input
	input.className = type ? "success" : "error";
	return type;
}Code language: JavaScript (javascript)

以下显示表单上的姓名输入字段

<div class="field">
	<label for="name">Name:</label>
	<input type="text" id="name" name="name" placeholder="Enter your fullname" />
	<small></small>
</div>Code language: HTML, XML (xml)

如果名称的值为空，则需要先获取其父级，即类为“field”的<div>。

input.parentNodeCode language: CSS (css)

接下来，您需要选择<small>元素

const msg = input.parentNode.querySelector("small");Code language: JavaScript (javascript)

然后，更新消息

msg.innerText = message;

之后，我们根据类型参数的值更改输入字段的 CSS 类。如果类型为 true，则将输入的类更改为 success。否则，我们将类更改为 error。

input.className = type ? "success" : "error";Code language: JavaScript (javascript)

最后，返回类型的 value

return type;Code language: JavaScript (javascript)

showError()和showSuccess()函数

showError()和showSuccess()函数调用showMessage()函数。showError()函数始终返回false，而showSuccess()函数始终返回true。此外，showSuccess()函数将错误消息设置为空字符串。

function showError(input, message) {
	return showMessage(input, message, false);
}

function showSuccess(input) {
	return showMessage(input, "", true);
}Code language: JavaScript (javascript)

hasValue()函数

hasValue()函数检查输入元素是否有值，并根据情况使用showError()或showSuccess()函数显示错误消息

function hasValue(input, message) {
	if (input.value.trim() === "") {
		return showError(input, message);
	}
	return showSuccess(input);
}Code language: JavaScript (javascript)

validateEmail()函数

validateEmail()函数验证电子邮件字段是否包含有效的电子邮件地址

function validateEmail(input, requiredMsg, invalidMsg) {
	// check if the value is not empty
	if (!hasValue(input, requiredMsg)) {
		return false;
	}
	// validate email format
	const emailRegex =
		/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

	const email = input.value.trim();
	if (!emailRegex.test(email)) {
		return showError(input, invalidMsg);
	}
	return true;
}Code language: PHP (php)

validateEmail()函数调用hasValue()函数检查字段值是否为空。如果输入字段为空，则会显示requiredMsg。

要验证电子邮件，它使用正则表达式。如果电子邮件无效，则validateEmail()函数会显示invalidMsg。

提交事件处理程序

首先，使用querySelector()方法按 ID 选择注册表单

const form = document.querySelector("#signup");Code language: JavaScript (javascript)

其次，定义一些常量来存储错误消息

const NAME_REQUIRED = "Please enter your name";
const EMAIL_REQUIRED = "Please enter your email";
const EMAIL_INVALID = "Please enter a correct email address format";Code language: JavaScript (javascript)

第三，使用addEventListener()方法添加注册表单的submit事件侦听器

form.addEventListener("submit", function (event) {
	// stop form submission
	event.preventDefault();

	// validate the form
	let nameValid = hasValue(form.elements["name"], NAME_REQUIRED);
	let emailValid = validateEmail(form.elements["email"], EMAIL_REQUIRED, EMAIL_INVALID);
	// if valid, submit the form.
	if (nameValid && emailValid) {
		alert("Demo only. No form was posted.");
	}
});
Code language: JavaScript (javascript)

在提交事件处理程序中

  1. 通过调用event.preventDefault()方法停止表单提交。
  2. 使用hasValue()和validateEmail()函数验证姓名和电子邮件字段。
  3. 如果姓名和电子邮件均有效，则显示警报。在实际应用中，您需要调用form.submit()方法提交表单。

总结

  • 使用<form>元素创建 HTML 表单。
  • 使用 DOM 方法（例如getElementById()和querySelector()）选择<form>元素。document.forms[index]也会通过数字索引返回表单元素。
  • 使用form.elements访问表单元素。
  • 当用户单击表单上的提交按钮时，会触发submit事件。
本教程是否有用？
JavaScript MutationObserver
先前
JavaScript MutationObserver
接下来
JavaScript 复选框
JavaScript Checkbox