HTML 表单验证-html教程-PHP中文网

HTML 表单验证

1.使用 HTML5 内置功能

2.使用 JavaScript

结论 - HTML 表单验证

首页

web前端

html教程

HTML 表单验证

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:44 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML 表单验证是检查 HTML 表单页面内容以避免错误数据发送到服务器的过程。此过程是开发基于 HTML 的 Web 应用程序的重要一步，因为它可以轻松提高网页或 Web 应用程序的质量。有两种方法可以执行 HTML 表单验证，即使用 HTML5 内置功能和使用 JavaScript。

HTML 表单验证

主要有两种方法可以执行 HTML 表单验证，

使用 HTML5 内置功能
使用 JavaScript

1.使用 HTML5 内置功能

HTML5 无需使用 JavaScript 即可提供表单验证的功能。表单元素将添加验证属性，这将自动为我们启用表单验证。验证属性允许我们在表单元素上指定各种规则。它们允许我们设置数据的长度、设置数据值的限制等。

让我们看一个使用内置表单验证元素进行 HTML 表单验证的简单示例，然后进一步使用 JavaScript 进行 HTML 表单验证。

示例

使用 HTML5 验证属性的表单验证 – 在本示例中，我们将使用 required 表单验证标签，这将导致强制输入该字段中的数据；否则，表格将不会提交。下面是相同的代码片段，以及 Web 表单的一些样式。

<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<div class = "formData" >
<form action = "#" >
Name: <input type = "text" name = "name" required>
<input type = "submit" >
</form>
</div>
</body>
</html>

登录后复制

因此，我们有一个非常简单的 Web 表单，只有一个输入数据字段作为“名称”。请注意，我们在输入标签元素中使用了必需的关键字。

输出:

HTML 表单验证

让我们尝试在名称字段中不输入任何值的情况下提交表单。提交后，您将收到“请填写此字段”的错误消息，并且表格将不会提交。

带有空白数据的输出：

HTML 表单验证

所以可以看出错误信息不是我们添加的，而是HTML本身提供的。

与 HTML 提供的 required 属性一样，有各种表单标签可供使用。下面是一些表单验证标签的列表，

minlength：用于设置元素所需的最小长度
maxlength: 用于设置元素所需的最大长度
模式： 用于定义正则表达式

2.使用 JavaScript

JavaScript 广泛用于 HTML 表单验证，因为它提供了更多自定义和设置验证规则的方法；此外，旧版本的 Internet Explorer 不支持 HTML5 中提供的某些标记。 JavaScript 长期以来一直用于表单验证。

在 JavaScript 表单验证中，基本上，我们定义函数来在将数据提交到服务器之前验证数据。我们可以实现实现验证规则所需的任何逻辑。 JavaScript 通过这种方式更加灵活，因为定义规则没有限制。但与使用内置标签的表单验证相比，需要了解 JavaScript 才能实现这一点。

让我们看看使用 JavaScript 进行表单验证的示例。我们将实现相同的表单示例，仅使用一个输入作为名称元素。

示例

<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
.errorMessage {
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
}
.errorMessage.top-arrow:after {
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
}
</style>
</head>
<body>
<div class = "formData" >
<form name = "simpleForm" action = "#" onsubmit = "return validateForm()" >
Name: <input type = "text" name = "name">
<input type = "submit" >
</form>
<p class = "errorMessage top-arrow" > </p>
</div>
<script>
function validateForm() {
var nameVal = document.forms["simpleForm"]["name"].value;
if(nameVal == null || nameVal == "") {
document.getElementsByClassName( "errorMessage" )[0].style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )[0].innerHTML = "Please Fill out this field";
return false;
} else {
return true;
}
}
</script>
</body>
</html>

登录后复制

在前面的示例中，我们已从表单元素“name”中删除了所需的标签。相反，我们在表单元素中添加了一个 onsubmit 标签。如前所述，我们将编写一个验证函数，其中 <script>标签已添加。</script>

我们编写了一个名为 validateForm() 的函数来执行验证。我们正在实施相同的规则来检查名称字段中输入的数据是否为空。检查这一点的逻辑是单击提交按钮后，将调用此函数，并检查输入的值是否为空或空白。如果数据不为空或空，该函数将返回 true，但如果数据为空或空，则会向用户显示错误消息。

输出：

HTML 表单验证