HTML5 中带有自定义验证信息的表单必填属性

HTML5 包含一些内置的表单验证功能，允许开发人员轻松地将验证功能添加到他们的表单中。这些功能之一是 “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 在 “标题 “属性之外还提供了 “模式 “元素，允许程序员指定一个正则表达式，输入必须匹配才能被接受。如果输入的内容不符合要求的模式，用户会从浏览器中看到一个错误提示

例子

下面是一个例子，说明如何使用 “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>

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