novalidate 和 formnovalidate 属性有什么区别?

htmlweb developmentfront end technology

novalidate 和 formnovalidate 属性用于绕过验证。novalidate 属性应用于表单，阻止其进行验证。formnovalidate 应用于输入类型的提交按钮，它会覆盖 novalidate 属性。它会在不进行验证的情况下提交表单。

novalidate 属性也是一个布尔属性，但使用它不会验证提交的表单。 HTML 中的 formnovalidate 属性在表单包含多个提交按钮时非常有用。

HTML novalidate 属性

HTML 中的 novalidate 属性用于表示表单在提交时不会进行验证。它是一个布尔值属性，如果您希望用户保存表单提交的进度，则非常有用。如果禁用了表单验证，用户可以轻松保存表单，并在稍后继续提交。

示例

您可以尝试运行以下代码，了解如何在 HTML 中使用 novalidate属性。在以下示例中，如果您在 <input type=”number> 字段中添加文本，则不会显示错误。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML novalidate attribute</title>
   </head>

   <body>
      <form action = "" method = "get" novalidate>
         Team Name<br><input type = "name" name = "tname"><br>
         Team Rank<br><input type = "number" name = "trank"><br>
         <input type = "submit" value = "Submit">
      </form>
   </body>
</html>

HTML formnovalidate 属性

当表单包含多个提交按钮时，HTML 中的 formnovalidate 属性非常有用。
formnovalidate 属性会覆盖 <form> 属性的另一个属性，即 novalidate 属性。
注意 − Internet Explorer 和 Safari 不支持 formnovalidate 属性。

示例

您可以尝试运行以下代码，了解如何在 HTML 中使用 formnovalidate 属性。如果您在未进行验证的情况下点击提交按钮，则表单将无法进行验证。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML formnovalidate attribute</title>
   </head>

   <body>
      <form action = "" method = "get">
         Rank <input type="number" name="rank"><br>
         <input type="submit" value="Submit"><br>
         <input type="submit" formnovalidate="formnovalidate"
            value="Submit with no validation”>
      </form>
   </body>
</html>