JavaScript 表单

admin

2954

礼包福利

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

表单基础知识要在 HTML 中创建表单，可以使用

Code language: HTML, XML (xml)

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

action属性指定将处理表单提交的 URL。在此示例中，操作是/signup URL。method属性指定用于提交表单的 HTTP 方法。通常，方法是post或get。通常，当您想从服务器检索数据时使用get方法，而当您想更改服务器上的数据时使用post方法。

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

action - 是处理表单数据的 URL。它等效于元素的action属性。method - 是 HTTP 方法，它等效于元素的method属性。HTMLFormElement元素还提供了以下有用的方法

submit() - 提交表单。reset() - 重置表单。引用表单要引用元素，可以使用 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)提交表单通常，表单有一个提交按钮。单击它时，浏览器会将表单数据发送到服务器。要创建提交按钮，请使用或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 或名称访问元素。假设您有以下包含两个元素的注册表单

Sign Up

Name:

Email:

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 文档。在此处查看实时演示。

JavaScript Form Demo

Code language: HTML, XML (xml)HTML 文档引用了style.css和app.js文件。它使用元素在元素具有无效数据的情况下显示错误消息。

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

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

以下显示了完整的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 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)以下显示表单上的姓名输入字段

Name:

Code language: HTML, XML (xml)如果名称的值为空，则需要先获取其父级，即类为“field”的

。

input.parentNodeCode language: CSS (css)接下来，您需要选择元素

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)在提交事件处理程序中

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

2026-06-15 04:29:59