阅读(2102)

HTML 表单验证

最后一次修改 2017年08月04日

HTML表单验证

HTML5引入了对输入验证的支持。您通过属性管理输入验证。

以下列表显示了哪些元素和输入类型支持不同的验证属性。

验证属性: required
元素: textarea, select, input (text, password, checkbox, radio, file, datetime,datetime-local, date, month, time, week, number, email, url, search, 和 tel 类型)
验证属性: min, max
元素: input (datetime, datetime-local, date, month, time, week, number, 和 range 类型)
验证属性: pattern
元素: input (text, password, email, url, search, 和 tel 类型)

required输入

最简单的输入验证是确保用户提供一个值。您使用必需属性执行此操作。

在提供值之前，用户不能提交表单。

以下代码显示了正在使用的必需属性。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: 
      <input type="text" required id="name" name="name" />
      </label>
    </p>
    <p>
      <label for="password"> Password: 
      <input type="password" required placeholder="Min 6  characters" id="password"
        name="password" />
      </label>
    </p>
    <p>
      <label for="accept"> 
      <input type="checkbox" required id="accept" name="accept" /> Accept Terms & Conditions
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

bounded输入

您可以使用 min 和 max 属性来确保数值和日期值在特定范围内。

您不需要应用这两个属性。

min 和 max 值是包含性的，这意味着如果您指定最大值为100，则允许最大值（包括100）的任何值。

以下代码显示了应用于输入元素的数字类型的这些属性。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: <input
        type="number" min="0" max="100" value="1" id="price" name="price" />
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

匹配模式

pattern 属性确保值与正则表达式匹配。

以下代码显示了正在使用的pattern属性。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name"> Name: <input type="text" id="name"
        name="name" pattern="^.* .*$" />
      </label>
    </p>
  </form>
</body>
</html>

该模式确保用户输入两个名称，用空格分隔。

电子邮件或网址

输入元素的电子邮件和网址类型确保用户已分别输入有效的电子邮件地址或完全限定的网址。

我们可以将pattern属性与这些类型组合以限制值，例如将电子邮件地址限制为特定域。

以下代码将模式属性与电子邮件输入元素类型一起使用。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="email"> Email: <input type="email"
        placeholder="user@mydomain.com" required pattern=".*@mydomain.com$"
        id="email" name="email" />
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

上面的代码使用了三个验证功能。

输入元素的电子邮件类型确保使用输入有效的电子邮件地址。
必需属性确保用户提供值。
pattern属性确保电子邮件地址属于特定域（mydomain.com）。

禁用验证

您可以通过将novalidate属性应用于表单元素，或将formnovalidate属性应用于可以提交表单的按钮和输入元素的类型来禁用表单验证。

以下代码显示了如何禁用表单验证。

<!DOCTYPE HTML>
<html>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="email"> Email: <input type="email"
        placeholder="user@mydomain.com" required pattern=".*@mydomain.com$"
        id="email" name="email" />
      </label>
    </p>
    <input type="submit" value="Submit" /> <input type="submit"
      value="Save" formnovalidate />
  </form>
</body>
</html>

← HTML 表单输出

没有了 →