知识要点
1、:valid
用于匹配输入值为合法的元素
2、:invalid
用于匹配输入值为非法的元素
3、required
属性规定必需在提交之前填写输入字段
4、pattern
属性规定用于验证输入字段的正则表达式
:valid/:invalid
选择器用于在表单元素中的值是合法/非法时设置指定样式。
注意: :valid/:invalid
选择器只作用于能指定区间值的元素,例如 input
元素中的 min
和 max
属性,及正确的 email
字段, 合法的数字字段等。
required
属性适用于以下 <input>
类型:text
, search
, url
, telephone
, email
, password
, date pickers
, number
, checkbox
, radio
以及 file
。当然textarea
也可以。
:valid、:invalid示例
<style> 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: inset 5px 0 0 green; } // input内容非法,边框颜色是红色 input:invalid { border-color: red; box-shadow: inset 5px 0 0 red; } </style> <input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
效果如下:
required示例
... <form> <input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required > <button type="submit">提交</button> </form>
这时候点击提交,就好自动校验了,而且HTML5会直接添加Tips提示用户,请看下列示例(虽然样式不是很美观):
在线演示:
更多前端开发学习知识,请关注HTML中文网
以上就是css伪类:valid和:invalid实现表单校验的方法介绍的详细内容,更多请关注0133技术站其它相关文章!