木灵鱼儿

木灵鱼儿

阅读：1301

最后更新：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 {
  ...
}
文章分类 CSS
文章标签 样式cssinput校验表单formrequiredvalidinvalidtextarea
木灵鱼儿

木灵鱼儿

发布了 696 篇文章获得点赞 0获得阅读 1301

版权申明

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

one
two
three

关于作者

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

相关文章

解决vant的tab组件swipeable功能与内部scroll冲突的问题解决vant的tab组件swipeable功能与内部scroll冲突的问题
moment utc时间转本地时间moment utc时间转本地时间
css选择器优先级计算规则css选择器优先级计算规则
对象的遍历对象的遍历
属性描述符属性描述符

目录树