导航菜单
首页 » 梦之城登录 » 正文

提灯映桃花-纯CSS搞定表单校验,并且有友爱提示,你信吗?

点击右上方赤色按钮重视“web秀”,让你提灯映桃花-纯CSS搞定表单校验,并且有友爱提示,你信吗?真实秀起来

常识关键

1、:valid 用于匹配输入值为合法的元素

2、:invalid用于匹配输入值为不合法的元素

3、required 特点规则必需在提交之前填写输入字段

4、pattern 特点规则用于验证输入字段的正则表达式

:valid/:invalid 选择器用于在表单元素提灯映桃花-纯CSS搞定表单校验,并且有友爱提示,你信吗?中的值是合法/不合法时设置指定款式。

留意: :valid/:invalid 选择器只作用于能指定区间值的元素,例如 input 元素中的 min 和 max特点,及正确的 ema提灯映桃花-纯CSS搞定表单校验,并且有友爱提示,你信吗?il 字段, 合法的数字字段等。

required 特点适用于以下 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。当然textarea也能够。

:valid、:invalid示例


input{
display: block;
padding: 0 20px;
outline: none;
border: 1px solid #ccc;
width: 150px;
height: 40px;
transition: all 300ms;
}
// input内容合法,边框色彩是绿色
input:valid {
border-color: green;
box-shadow: in提灯映桃花-纯CSS搞定表单校验,并且有友爱提示,你信吗?set 5px 0 0 green;
}
// input内容不合法,边框色彩是赤色
input:invalid {
bo提灯映桃花-纯CSS搞定表单校验,并且有友爱提示,你信吗?rder-color: red;
box-shadow: inset 5px 0 0 red;
}


预览提灯映桃花-纯CSS搞定表单校验,并且有友爱提示,你信吗?地址:

required示例

...


placeholder="请输入你的手机"
pattern="^1[3456789]\d{9}$"
requcornired
>


这时候点击提交,就好主动校验了,并且HTML5会直接增加Tips提示用户,请看下列示例(尽管款式不是很漂亮):

喜爱小编或许觉得小编文章对你有协助的,能够点击一波重视哦!一起,要源码的小伙伴能够点击下方“了解更多”。

最终引荐一个专栏文章,感谢小伙伴们多多支撑,谢谢我们!

二维码