深入探究novalidate

小蓝 • 2024-12-22 16:06 • 编程

在HTML5中有一个非常实用的属性–novalidate

一、noValidate属性值

在HTML5中，表单默认进行验证，如果用户的输入格式不符合表单字段的限制条件，浏览器会提示用户进行更正处理，但在某些情况下，我们可能不希望自动验证，这个时候可以使用novalidate来关闭表单的验证功能。

在没有novalidate属性的情况下，当我们提交表单时，如果表单字段的输入内容不符合规则，表单将会在提交前进行验证提示。而当我们给表单添加novalidate属性后，在表单提交时就不会进行验证，即使表单字段不符合规则，也可以提交，浏览器也不会提示用户。

举个例子，当我们在输入密码时，密码的长度经常会有要求，若不符合要求，我们希望用户直接提交，而不会在页面上卡住。这个时候novalidate就可以派上用场。

二、新增的novalidate属性

在HTML5之前还没有novalidate属性，只能使用javascript来禁用表单的验证。在HTML5之后，我们可以通过在form标签中添加novalidate属性来关闭表单验证功能。

  <form action="submit.php" method="post" novalidate>
    <!-- 表单内容 -->
  </form>

novalidate是一个布尔型属性，只要存在这个属性，表单验证就会被禁用。

三、与novalidate相关的其他属性选项

novalidate作为一个非常实用的表单属性，在HTML5中还有其他属性与之相关：

1、required

required属性是规定表单字段必须填写/选中的属性,若表单字段为空，浏览器将会阻止表单提交。

  <form action="submit.php" method="post">
    <input type="text" name="username" required>
    <input type="email" name="email" required>
    <input type="submit" name="submit">
  </form>

在以上代码中，当我们点击提交按钮时，浏览器会判断表单字段是否为空，如果为空，表单将不会被提交。

2、pattern

pattern属性可用于规定输入字段的格式，它接受一个正则表达式作为参数。如果用户输入的值不符合HTML规定的格式，浏览器将预测其输入错误，并返回相应的提示信息。

  <form action="submit.php" method="post">
    <input type="text" name="username" pattern="[A-Za-z]">
    <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    <input type="submit" name="submit">
  </form>

在以上代码中，pattern属性对input标签中的name属性值进行匹配判断，并提示用户相应的错误信息。

3、formnovalidate

formnovalidate属性表示在表单提交时忽略浏览器原生的校验规则，强制提交表单，并且不做校验

  <form action="submit.php" method="post">
    <input type="text" name="username" required>
    <input type="submit" name="submit" formnovalidate >
  </form>

当单击提交按钮时，表单将被提交，而不会执行任何校验。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285767.html