首页 > 文章列表 > HTML 5验证有用吗?

HTML 5验证有用吗?

434 2023-09-16

在本文中,我们将根据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>

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

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