首页 >web前端 >js教程 >使用 HTML5 中的自定义验证消息形成必需属性

使用 HTML5 中的自定义验证消息形成必需属性

WBOY转载: 2023-08-25 10:29:15701浏览

HTML5 包含许多内置的表单验证功能，使开发人员可以轻松地将验证添加到其表单中。这些功能之一是“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 来个性化验证消息。

开发人员可以快速将表单验证添加到 HTML5 表单中，并通过利用“needed”元素并自定义验证消息来确保用户已提供必要的信息。许多 Web 应用程序都依赖于表单验证，因为它是保证用户输入的准确性和完整性的重要工具。

以上是使用 HTML5 中的自定义验证消息形成必需属性的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html5 css 正则表达式表单验证伪类

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：如何使用FabricJS设置矩形移动时的边框不透明度？下一篇：如何使用 FabricJS 设置圆的填充？

查看更多