html5中valid、invalid、required的定义


Posted in HTML / CSS onFebruary 21, 2014

css3 提示只适用于高级浏览器:

Chrome
Firefox
Safari
IE9+

valid、invalid、required的定义

代码如下

复制代码
代码如下:

input:required, input:valid , input:invalid{border:0 none; outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow: none;}

过去验证表单会通过js和正则去判断填写的内容是否正确,如email的验证。

HTML5的出现为我们提供一些属性,不用编写js和正则即可解决这个检验表单内容。
:required
必须,那input不能为空的意思。

:valid
有效,即当填写的内容符合要求的时候触发。

:invalid
无效,即当填写的内容不符合要求的时候触发。

HTML / CSS 相关文章推荐
CSS3中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 #HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 #HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 #HTML / CSS
html5画布旋转效果示例
Jan 27 #HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 #HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 #HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 #HTML / CSS
You might like
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
json跟xml的对比分析
2008/06/10 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python 函数list&read&seek详解
2019/08/28 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
python实现数字炸弹游戏
2020/07/17 Python
python如何变换环境
2020/07/21 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
python 批量将中文名转换为拼音
2021/02/07 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
C++是不是类型安全的
2014/02/18 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
学习计划是什么
2019/04/30 职场文书
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android