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,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
台式机
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
10 | 4 | 10 | 12 | 10.1 |
移动/平板
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 4.4.3-4.4.4 | 10.3 |
1 布尔属性:HTML5 中有许多布尔属性。元素上布尔属性的存在表示真值,属性的缺失表示假值。如果属性存在,则其值必须为空字符串,或者与属性的规范名称(不区分大小写)匹配,并且没有前导或尾随空格。
sddd dcdc fvg
kannan
sivabalan 测试消息
有没有办法在 Internet Explorer 8 中使用这个 :required?
sdfsdgsgfdf
有没有人弄清楚如何在 Safari 上实现这一点?
谢谢。
很棒的文章,谢谢您。
正式来说,输入类型等于 =”email” 值。正则表达式毫无用处 :mrgreen
gfgg
如果您想确保必填表单字段已填写,请对您的输入字段使用 required 属性。这是一种替代 CSS 的方法。
示例
在上面的示例中,用户不能在不填写姓名文本框字段的情况下提交表单。
REF: http://www.thesstech.com/html5/required_attribute
演示
http://www.thesstech.com/tryme?filename=required
您在哪里定义信息消息,比如“这是必填字段”?
您好。
是否可以使用 CSS3 来移除输入中的 required 条件?