木灵鱼儿

木灵鱼儿

阅读:244

最后更新:2021/05/08/ 0:13:33

纯css来做表单校验样式

css3新增了三个伪类::required:valid:invalid

  • :required 表示input不能为空时使用的
  • :valid 表示通过,表单元素和form表单都有的伪类
  • :invalid 表示不通过,表单元素和form表单都有的伪类

其实如果要做一个表单css校验样式,:valid和:invalid就行了,但是实际操作上,:invalid还是有一些问题的。

当表单元素有required属性的时候,该表单元素默认就是:invalid,也就说,必填的表单元素,一开始就是不通过。

所以,如果此时设置:invalid伪类样式,是不合适的。

解决办法就是:

使用:placeholder-shown伪类来做排除,这个伪类表示,当表单元素的placeholder提示文本显示的时候。

而我们的表单在输入内容后,placeholder会消失。

//所有input的placeholder不显示时border为红色
input:not(:placeholder-shown) {
  border-color: red;
}

这样的话,即便我们输入了内容,border还是红色的,所以还需要配合:valid进行样式覆盖

input:not(:placeholder-shown) {
  border-color: red;
}

input:valid {
  border-color: green;
}

当表单通过时,颜色为绿色,:valid在后面,会覆盖上面红色边框效果。

这样的话,表单在无输入的情况下是无校验效果的,只有在输入后才有。

但是这样还有一个问题,就是当我required的元素,输入的是空格时,也会提示通过,应为他有内容,空字符也是内容。

在html5中,其实为表单元素提供了一个属性:pattern,他可以接收一个正则作为校验条件。

那这就很香了。

<input type="text" required placeholder="提示文字" pattern="\S+.*"/>

\S表示非空白就匹配
.*表示任何值都匹配

连起来就表示:开头不能为空格(全空格无法通过验证)

这样我们校验就更加准确了,简单的网页我们可以不需要使用js,在mvc开发中,这个简直就是省事神器。

注意:pattern只能用于input元素。

示例1:form验证通过button按钮颜色高亮

.form button.submit {
  color:#fff;
  background-color: #999;
}

.form:valid button.submit {
  background-color: #027fff;
}

百度找到一个demo,有兴趣可以去看看:demo

补充:

如果表单元素required属性不是所有的都设置,那么验证的样式就应该要做调整,否则,如果是没有required属性的元素,他的校验也是通过的,他会直接使用:valid的样式。

所以,最好使用属性选择器筛选一下

input[required]:not(:placeholder-shown) {
  ...
}

input[required]:valid {
  ...
}

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 244

相关文章

目录树