Javascript 简明教程
JavaScript - DOM Forms
The DOM Forms
HTML DOM 文档 forms 用于从用户获取数据。
在 JavaScript 中,可以使用 'document' 对象的 'forms' collection 来访问 HTML 文档的所有 <form> 元素。
你可以访问特定表单的所有表单元素并对它们进行操作。使用 JavaScript,你可以验证表单值,处理表单数据提交等。
Methods of 'forms' Collection
Method |
Description |
[index] |
从 HTML 表单的集合的 0-based 索引中获取特定的 <form> 元素。 |
item(index) |
从 HTML 表单的集合的 0-based 索引中获取特定的 <form> 元素。 |
namedItem(id) |
获取带有特定 id 的 <form> 元素。 |
Example: Finding total <form> elements in the HTML document)
在下面的代码中,我们使用 '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>
Example: Get the id of all <form> elements
在下面的代码中,我们使用它的索引访问每个表单,并使用 '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>
Example: Get particular form using its id and namedItem() method
在下面的代码中,我们通过取 'forms' 集合作为引用,使用 namedItem() 方法来获取一个带有特定 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 Form Submission
在 JavaScript 中,可以使用 'submit' 输入类型提交表单,并使用 onsubmit() 事件处理程序执行特定函数来处理表单数据。
Example
在下面的代码中,该表单获取用户的姓氏和名字。之后,当用户点击提交输入时,它将调用 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 Form Validation
在 JavaScript 中,您还可以验证表单以确保用户已填写必要的输入。您可以在表单提交时调用的函数中执行验证检查。
此外,当表单未满足特定条件时,您还可以在输出中显示错误信息。
Example
在以下代码中,我们检查在用户提交表单时,名字和姓氏的长度是否小于 3。如果名字或姓氏的长度小于 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 Form Data Validation
还需要验证输入数据。
出现这种情况时,您希望用户传递数字数据,但他们错误地传递了字符串数据。在这种情况下,开发人员需要验证数据并显示错误信息。
您可以在客户端或服务器端验证数据。最佳实践是在客户端验证数据并将纯数据发送到服务器。
Example
在以下代码中,我们创建了输入字段,以从用户获取电子邮件。当用户提交表单时,我们使用正则表达式和 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;
//Validate email using regex
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>
Form Validation Using the HTML Constraint
(Automatic form validation)
在 HTML5 中,引入了某些约束来验证表单。您可以将这些约束用作 HTML 元素的属性,如果输入不符合约束,它将阻止表单提交。
下表包含约束及其说明。
Constraint |
Description |
disabled |
禁用输入元素。 |
max |
指定输入元素的最大值。 |
min |
指定输入元素的最小值。 |
pattern |
为输入元素指定特定模式。 |
required |
将输入元素指定为必填字段。 |
type |
指定输入元素的类型。 |
Example: Using the required attribute
在下方的代码中,我们在 input 元素中使用了“required”属性。当你在没有在 input 字段中输入数字的情况下提交表单时,它将显示一条默认的错误消息。
<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 选择器来验证表单。