novalidate和formnovalidate属性有什么区别？

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

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

HTML novalidate 属性

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

示例

您可以尝试运行以下代码来学习如何在 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 属性

formnovalidate 属性在 HTML 中在您拥有多个提交按钮的表单时非常有用。
formnovalidate 属性会覆盖 <form> 属性的另一个属性，即 novalidate 属性。
注意 − formnovalidate 属性在 Internet Explorer 和 Safari 中不受支持（了解更多信息：Web浏览器）。

示例

您可以尝试运行以下代码来学习如何在 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>

更新于：2023年11月20日

1K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告