:required

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

:required 伪类选择器CSS 中允许作者选择和设置具有 required 属性的任何匹配元素的样式。表单可以轻松地指示哪些字段必须包含有效数据才能提交表单,但这允许用户避免服务器作为唯一验证器而造成的延迟。

假设我们有一个属性为 type="name" 的输入,并使用 required 布尔属性1 将其设为必需输入。

<input type="name" name="fname" required>

现在,我们可以使用 :required 伪类选择器 设置该输入的样式。

/* style all elements with a required attribute */
:required {
  background: red;
}

我们还可以使用 简单选择器 以及将多个 伪类选择器 链在一起的方式设置必需表单字段的样式。

/* style all input elements with a required attribute */
input:required {
  box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}

/**
 * style input elements that have a required
 * attribute and a focus state
 */
input:required:focus {
  border: 1px solid red;
  outline: none;
}

/**
 * style input elements that have a required
 * attribute and a hover state
 */
input:required:hover {
  opacity: 1;
}

演示

查看 CodePen 上 Chris Coyier (@chriscoyier) 的 :required 样式

关注点

required 属性被视为 布尔值,这意味着它不需要值。在元素上简单地设置 required 即可让浏览器知道该属性存在,并且相应的输入实际上是必需字段。虽然,根据 W3C 规范,required 属性也适用于空值或具有属性名称的值。

<input type="name" name="fname" required="">
<input type="name" name="fname" required="required">

required 属性还请求浏览器使用本机调用,例如演示中所示的气泡消息。

对于那些没有使用 :required 设置样式的输入,作者还可以使用 :optional 伪类选择器 以及 :invalid:valid,这些选择器在表单字段的数据需求得到满足时触发。

表单验证还可以与 required 结合使用 pattern 属性,以根据输入的 type 属性帮助过滤数据。模式可以写成正则表达式或字符串。在下面的示例中,我们使用正则表达式来匹配电子邮件地址的语法。

<input type="email" name="email" pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required>

:required 属性适用于单选按钮。如果您在一个单选按钮(或所有单选按钮)上设置了 required,则该特定组的单选按钮将被要求选择。在复选框上,将使每个单独的复选框都成为必需的(必须选中)。

相关属性

其他资源

浏览器支持

这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

台式机

ChromeFirefoxIEEdgeSafari
104101210.1

移动/平板

Android ChromeAndroid FirefoxAndroidiOS Safari
1271274.4.3-4.4.410.3

1 布尔属性:HTML5 中有许多布尔属性。元素上布尔属性的存在表示真值,属性的缺失表示假值。如果属性存在,则其值必须为空字符串,或者与属性的规范名称(不区分大小写)匹配,并且没有前导或尾随空格。