HTML 5 验证有用吗?

htmlweb developmentfront end technology更新于 2024/8/10 3:24:17

在本文中，我们将基于"HTML5 验证是否有用"这一主题开展一项任务。正如我们之前所了解的，我们将对其进行简要的介绍。

为了防止将错误的数据传输到服务器，HTML 表单验证涉及检查 HTML 表单页面的内容。此过程对于创建基于 HTML 的 Web 应用至关重要，因为它可以使各种网页和应用程序变得更好。

让我们通过以下示例来了解更多关于 HTML5 验证的信息。

示例 1

在下面的示例中，我们将创建一个带有输入字段的简单表单。

<!DOCTYPE html>
<html>
<body>
   <form action = "#" >
      NAME:<input type = "text" name = "name" required>
      <input type = "submit">
   </form>
</body>
</html>

脚本执行后，将显示一个输出，其中包含一个用于输入姓名的输入字段以及一个按钮，如果表单有效，则该按钮允许提交表单。

如果用户尝试在未填写输入字段的情况下提交表单，则表单将失效并显示一条警告"请填写此字段"。

示例 2:使用 JavaScript

在下面的示例中，我们运行一个脚本来验证表单。

<!DOCTYPE html>
<html>
<body>
   <form name="mytutorial" action="#"
      onsubmit="return validateForm()" method="post">
      Name: <input type="text" name="name">
      <input type="submit" value="Submit">
   </form>
   <script>
      function validateForm() {
         let x = document.forms["mytutorial"]["name"].value;
         if (x == "") {
            alert("Name Can't Be Empty");
            return false;
         }
      }
   </script>
</body>
</html>

脚本执行后，将生成输出，其中包含一个用于输入姓名的输入字段和一个提交按钮。

当用户尝试在未输入任何输入字段的情况下提交表单时，表单将提交失败并显示警告"姓名不能为空"。

示例 3

在下面的示例中，我们创建了一个用于提交的简单电子邮件表单。

<!DOCTYPE html>
<html>
<body>
   <form action = "/cgi-bin/html5.cgi" method = "get">
      Enter email : <input type = "text" name = "newinput" required/>
      <p>Try to submit using Submit button</p>
      <input type = "submit" value = "submit"/>
   </form>
</body>
</html>

运行上述脚本后，它将生成输出，其中包含一个带有提示的电子邮件输入字段和一个提交按钮。

如果用户尝试提交邮件而未填写电子邮件，则会失败并在网页上显示警报。