木灵鱼儿
阅读:977
纯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 {
...
}
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
transform 知识补充
rotate的坐标轴和默认值z轴可以看成正对着自己脸的一根轴,每个轴的旋转方向默认如图箭头所示。所有的旋转角度,正值都是根据默认的旋转方向来得,负值则是相反。transform: rotateZ(45deg);只有Z轴的旋转再二维的界面才是有效的,如下图所示:因为在二维的界面Z轴的变化才是有效的,所以默认值的设置就是Z轴,所以简写形式等效于rotateZtransform: rotate(45deg); /*等同于rotateZ(45deg)*/translatetranslate的变化是根据元素的坐标轴而变化的,比如X轴移动100px;transform: translateX(100...

meta name= viewport 知识补充
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候,网页只能识别硬件的物理像素,而非软件像素。物理像素:硬件本身的实际像素大小软件像素:设备尺寸限制,过大的像素并不能带来很好的体验,显示的内容过多反倒无法正常使用,于是有了软件像素,软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是:375px*812px;它的比是:3;那么它的物理像素就等于:(375*3)*(812*3)更多的对比可以去这个网站查看:mydevice然而实际上移动端设备都会有一个默认的宽度:980px,所以,即便我们没有设置meta viewport,网页也不可能真的使用...

flex布局知识补充
子元素自身的order属性子元素的order的作用详解:默认情况下order的值都为0,如果这个值越小,那么就越靠近起始点,值越大,位置就越后,order其实用于移动元素的位置,而位置的方向则取决于父元素设置的:flex-direction子元素自身的align-self属性从正常角度,align-self是控制子元素y轴的对齐方式,也称侧轴对齐,这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果,最好配合:flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度:当主轴是...
element input异步校验+自定义错误提示
主要的效果就是用户注册时,输入的账号如果已经注册了,要提示已经注册,然后提供一个按钮,直接前往登陆。效果图教程首先我们要知道怎么进行自定义错误提示<template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input v-model="form.account" name="a...

element input表单验证数字类型方法大全
是不是常常头疼数字类型的校验,整数,小数,往往无法通过一个rules的type属性搞定,自定义校验又五花八门,是否有一套标准流程呢?整数校验整数校验简单,input使用.number修饰符,rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数:" pr...
移动端适配iPhoneX和安卓底部小黑条
这个问题还是同事发现的,毕竟我这种穷人根本用不起苹果,更何况也用不来,毕竟,我爱安卓。废话不多说,主要问题就是 iPhoneX底部小黑条问题,他的宽度也会被网页占据,导致小黑条显示在网页上头,第一是触发上会出现问题,第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明,那么就在后面content里加上viewport-fit=cover...

文件上传时对input标签的重置
今天就遇到了这个需求,当我上传文件超时或者失败后,再选择同一个文件上传,是不会触发change事件的,所以失败或者成功后我们需要重置下元素。<form action="" id="uploads"> <input type="file" id="fileUp"/> </form>1# 将整个form表单重置 $("#uploads")[0].reset(); //重置 2# 将当前input标签的value值设为空 document.getElem...
css使用系统字体作为网页字体最佳实践
目前前端对字体的选择,最好的做法就是用系统的默认字体,这样省去了对每个操作系统的字体判断,谁知道我们指定的这个字体用户安装没有,而且字体文件一向都很大,特别是中文字体。但是对于指定系统字体,其实也是需要兼容的,这里就放上一个专业的字体文章:《奇思妙想 CSS 文字动画》;虽然这个文章名字叫动画,但是里面内容很丰富,自己学习。以css-tricks的为模板,提取其中精华,大概是这么一条信息:{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

koa教程2 用户注册及Joi校验、成功信息返回
用户注册用户数据表搭建完毕后,我们肯定是需要注册用户的,那么首先我们需要创建一个路由api了。在根目录:/app/router/v1目录下创建一个user.js文件。user.js:const Router = require("koa-router"); const router = new Router({ prefix: "/v1/user" }); const { User } = require(`${process.cwd()}/models/user`); //注册用户 router.post("/register&q...
