JavaScript - DOM 表单

上一页
下一页

DOM 表单

HTML DOM 文档表单用于从用户那里获取数据。

在 JavaScript 中，你可以使用 'document' 对象的 'forms' 集合来访问 HTML 文档的所有 <form> 元素。

您可以访问特定表单的所有表单元素并对其进行操作。使用 JavaScript，您可以验证表单值、处理表单数据提交等。

语法

按照下面的语法使用 'forms' 集合来操作 DOM 的表单。


 document.forms;

这里，'forms' 是 'document' 对象的一个属性。

'forms' 集合的属性

属性 描述
length 表示 HTML 文档中 <form> 元素的数量。

'forms' 集合的方法

方法 描述
[index] 要从 HTML 表单集合的从 0 开始的索引中获取特定的 <form> 元素。
item(index) 要从 HTML 表单集合的从 0 开始的索引中获取特定的 <form> 元素。
namedItem(id) 要获取具有特定 id 的 <form> 元素。

返回值

document.forms 按照 HTML 文档中出现的顺序返回所有表单的集合。

示例：在 HTML 文档中查找总<form>元素）

在下面的代码中，我们使用 'forms' 集合的 'length' 属性来查找 HTML 文档中现有表单的数量。


<html>
<body>
	 <form>
	 	 <input type = "text" name = "first" id = "first" value = "First Name">
	 </form>
	 <form>
	 	 <input type = "text" name = "second" id = "second" value = "Last Name">
	 </form>
	 <form>
	 	 <input type = "text" name = "third" id = "third" value = "Contact">
	 </form>
	 <div id = "output">Total number of forms in the HTML document is: </div>
	 <script>
	 	 document.getElementById('output').innerHTML += document.forms.length;
	 </script>
</body>
</html>

示例：获取所有 <form> 元素的 id

在下面的代码中，我们使用其索引访问每个表单，并使用 'id' 属性来获取特定表单的 ID。


<html>
<body>
<form id = "form1">
	 <label for = "first"> Fruit Name: </label>
	 <input type = "text" name = "first" id = "first">
</form>
<form id = "form2">
	 <label for = "second"> Price: </label>
	 <input type = "text" name = "second" id = "second">
</form>
<form id = "form3">
	 <label for = "third"> Color: </label>
	 <input type = "text" name = "third" id = "third">
</form>
<div id = "output"> </div>
<script>
	 document.getElementById('output').innerHTML =	
	 "Id of the first form is: " + document.forms[0].id + "<br>" +
	 "Id of the second form is: " + document.forms[1].id + "<br>" +
	 "Id of the third form is: " + document.forms[2].id;
</script>
</body>
</html>

示例：使用其 id 和 namedItem（） 方法获取特定表单

在下面的代码中，我们使用了 namedItem（） 方法，将 'forms' 集合作为引用来获取具有特定 ID 的表单。


<html>
<body>
<form id = "form1">
	 	 <label for = "first"> First Name </label>
	 	 <input type = "text" name = "first" id = "first">
	 </form>
	 <form id = "form2">
	 	 <label for = "second"> Last Name </label>
	 	 <input type = "text" name = "second" id = "second">
	 </form>
<div id = "output">The innerHTML of the form element having id equal to form2 is: </div>
	 <script>
	 	 const output = document.getElementById('output');
	 	 output.innerHTML += document.forms.namedItem('form2').innerHTML;
	 </script>
</body>
</html>

JavaScript 表单提交

在 JavaScript 中，您可以使用 'submit' 输入类型提交表单，并使用 onsubmit（） 事件处理程序执行特定函数来处理表单数据。

例

在下面的代码中，表单采用用户的名字和姓氏。之后，当用户单击提交输入时，它会调用 submitForm（） 函数。

在 submitForm（） 函数中，我们使用 preventDefault（） 方法来阻止在不提交表单的情况下执行函数。

之后，我们使用 'forms' 集合来访问其输入字段的表单和值。

最后，我们在输出中打印输入值。


<html>
<body>
<form onsubmit = "submitForm(event)" id = "nameform">
	 <p><label>First Name: </label><input type = "text" name = "firstname"></p>
	 <p><label>Last Name: </label><input type = "text" name = "lastname"></p>
	 <p><input type = "submit"></p>
</form>
<div id = "output"> </div>
<script>
	 function submitForm(e) {
	 	 e.preventDefault();	
	 	 const output = document.getElementById('output');
	 	 const firstname = document.forms['nameform']['firstname'].value;
	 	 const lastname = document.forms['nameform']['lastname'].value;	
	 	 output.innerHTML = "First Name: " + firstname + ", Last Name: " + lastname;
	 }
</script>
</body>
</html>

JavaScript 表单验证

在 JavaScript 中，您还可以验证表单以确保用户已填写所需的输入。您可以在表单提交时调用的函数中执行验证检查。

此外，如果表单不满足特定条件，您还可以在输出中显示错误消息。

例

在下面的代码中，我们在用户提交表单时检查名字和姓氏的长度是否小于 3。如果 firstname 或 lastname 的长度小于 3，则会显示错误消息。


<html>
<body>
<form onsubmit = "submitForm(event)" id = "nameform">
	 <p>First Name: <input type = "text" name = "firstname"> </p>
	 <p>Last Name: <input type = "text" name = "lastname"> </p>
	 <p><input type = "submit"></p>
</form>
<div id = "output"> </div>
<script>	
	 function submitForm(e) {
	 	 e.preventDefault();
	 	 const output = document.getElementById('output');
	 	 const firstname = document.forms['nameform']['firstname'].value;
	 	 const lastname = document.forms['nameform']['lastname'].value;
	 	 if (firstname.length < 3 || lastname.length < 3) {
	 	 	 output.innerHTML += "The length of the first name or last name should be greater than 3. <br>";
	 	 } else {
	 	 	 output.innerHTML = "First Name: " + firstname + ", Last Name: " + lastname;
	 	 }
	 }
</script>
</body>
</html>

JavaScript 表单数据验证

还需要验证输入数据。

有时，您希望用户传递数字数据，但他们错误地传递了字符串数据。在这种情况下，开发人员需要验证数据并显示错误消息。

您可以在客户端或服务器端验证数据。最佳实践是在客户端验证数据并将纯数据发送到服务器。

例

在下面的代码中，我们创建了输入字段来接收用户的电子邮件。当用户提交表单时，我们使用 regex 和 test（） 方法来检查他们是否在输入中传递了有效的电子邮件地址。


<html>
<body>
	 <form onsubmit = "submitForm(event)" id = "emailform">
	 	 <p>Email: <input type = "email" name = "email"> </p>
	 	 <p><input type = "submit"></p>
	 </form>
	 <div id = "output"> </div>
	 <script>
	 	 function submitForm(e) {
	 	 	 e.preventDefault();

	 	 	 const email = document.forms['emailform']['email'].value;
	 	 	 // 使用正则表达式验证电子邮件
	 	 	 const emailRegex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/;
	 	 	 if (emailRegex.test(email)) {
	 	 	 	 document.getElementById('output').innerHTML = "Email is valid!";
	 	 	 } else {
	 	 	 	 document.getElementById('output').innerHTML = "Email is not valid!";
	 	 	 }
	 	 }
	 </script>
</body>
</html>

使用 HTML 约束进行表单验证 （自动表单验证）

在 HTML5 中，引入了一些约束来验证表单。您可以将这些约束用作 HTML 元素的属性，如果输入与约束不匹配，它会阻止表单提交。

下表包含约束及其描述。

约束 描述
disabled 禁用 input 元素。
max 指定 input 元素的最大值。
min 指定 input 元素的最小值。
pattern 指定输入元素的特定模式。
required 将 input 元素指定为必填字段。
type 指定 input 元素的类型。

语法

按照下面的语法将上述约束作为属性添加到 <input> 元素。


 <input attr=value >

示例：使用 required 属性

在下面的代码中，我们在 input 元素中使用了 'required' 属性。当您提交表单时未在输入字段中输入数字，它将显示默认错误消息。


<html>
<body>
	 <form onsubmit = "submitForm(event)" id = "form">
	 	 <p>Number: <input type = "number" name = "num" required> </p>
	 	 <p><input type = "submit"></p>
	 </form>
	 <div id = "output"> </div>
	 <script>
	 	 function submitForm(e) {
	 	 	 e.preventDefault();
	 	 	 const num = document.forms['form']['num'].value;
	 	 	 document.getElementById('output').innerHTML += "The submitted numeric value is: " + num + "<br>";
	 	 }
	 </script>
</body>
</html>

HTML 表单验证约束提供的功能有限。因此，您可以编写自定义 JavaScript 函数来验证表单。

您还可以使用 CSS 选择器来验证表单。

本页
上一页
下一页