在HTML5中使用带有自定义验证消息的”required”属性

在HTML5中使用带有自定义验证消息的”required”属性

HTML5包含许多内建的表单验证功能,使开发人员能够轻松地向其表单添加验证。 其中一个功能是”required”属性,该属性指定输入字段必填,在提交表单之前必须填写。

“required”属性是一个布尔属性。 如果表单中存在任何带有”required”属性的输入字段,则必须在提交表单之前完成此字段。

如果在提交表单之前该特定字段为空,用户将从浏览器看到一个错误消息,提醒他们输入字段是必需的。

使用”required”属性

要使用”required”属性,只需将属性添加到要设置为必填的输入字段即可−

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" required>
   </form>
</body>
</html>

浏览器在提交表单之前会验证输入字段是否已填写,如果未填写,则会显示错误消息。根据不同的浏览器,默认的错误消息可能会有所不同,但通常会指出该字段是必需的。

自定义验证消息

我们还可以通过指定一个唯一的消息来更改无效输入的消息,当字段无效时将发送给用户。我们可以使用”title”属性来更改默认的验证消息。

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" required title="Please enter your name">
   </form>
</body>
</html>

如果在提交表单时输入字段为空,此代码将向用户显示消息“请输入您的姓名”。

为了指定一个在填写表单时输入必须匹配的正则表达式,HTML5除了提供“title”属性外,还提供了“pattern”元素,允许程序员指定一个必须匹配的正则表达式,以便接受输入。如果输入不符合所需的模式,用户将从浏览器看到错误通知。

示例

以下是如何使用“pattern”属性指定输入字段的最小长度的示例 –

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
   </form>
</body>
</html>

如果输入不符合此条件,则会显示消息“请输入至少3个字符”。此代码要求输入字段至少包含3个字符。

自定义错误消息样式

使用CSS可以修改错误消息的外观。错误消息默认情况下作为小文本节点添加到输入字段中,并以红色字体编写。然而,我们可以使用CSS修改错误消息的外观,并控制它的显示方式。

“:invalid”伪类可用于选择无效的输入字段,CSS属性可以用于改变错误消息的样式。

示例

以下是使用CSS自定义错误消息样式的示例 –

<html>
   <style>
      input:invalid {
         border: 2px solid red;
      }
      input:invalid + span {
         color: red;
         font-weight: bold;
      }
   </style>
   <body>
      <form>
         <label for="name">Name:</label>
         <input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
      </form>
   </body>
</html>

当输入字段无效时,此代码将使其边框变为红色,并显示一个粗体和红色的错误消息。

使用JavaScript自定义错误消息

除了使用CSS以外,我们还可以使用JavaScript来自定义错误消息,并控制其显示方式。

要使用JavaScript自定义错误消息,我们可以使用”setCustomValidity”方法,该方法允许我们为输入字段指定自定义错误消息。

示例

以下是使用”setCustomValidity”方法设置自定义错误消息的示例 –

<html>
<body>
   <h2>JavaScript Validation</h2>
   <p>Enter a number and click OK:</p>
   <input id="InputField" type="text" required>
   <button onclick="myFunction()">OK</button>
   <p id="demo"></p>
   <script>
      function myFunction() {
         const txt = document.getElementById("InputField").value;
         console.log(txt);
         const txtLen = txt.length;
         console.log(txtLen);
         if (txtLen<3) {
            document.getElementById("demo").innerHTML = "Must be atleast 3 characters";
         } else {
            document.getElementById("demo").innerHTML = "Input OK";
         }
      }
   </script>
</body>
</html>

这段代码将把输入字段的错误信息设置为”请输入有效值。”

结论

在本文中,我们介绍了如何将个性化的验证信息与HTML5的”needed”元素结合使用。我们讨论了表单验证的基本原理,”needed”标签以及如何利用JavaScript和CSS来个性化验证信息。

开发人员可以通过利用”needed”元素和自定义验证信息,快速为他们的HTML5表单添加表单验证,并确保用户提供了必要的信息。许多Web应用程序依赖于表单验证,因为它是确保用户输入的准确性和完整性的关键工具。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程