纯css实现表单输入验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.email {
border: 1px solid #ddd;
outline: none;
}
.email:valid {
border: 1px solid #008c8c;
}
.email:invalid {
border: 1px solid #f00;
}
.email:valid + span::after {
content: '邮箱格式正确';
}
.email:invalid + span::after {
content: '邮箱格式不正确';
}
</style>
</head>
<body>
<input type="email" class="email">
<span></span>
</body>
</html>
纯css实现表单输入验证的更多相关文章
- 纯CSS实现表单验证
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
- AngulairJS表单输入验证与mvc
AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$ ...
- 微信小程序 --- 表单输入验证（手机号、邮箱验证、输入非空）
js代码 Page({ /** * 页面的初始数据 */ data: { indicatorDots: false, ...
- Go-Web编程_表单_0x02_验证表单的输入
开发Web的一个原则就是,不能信任用户输入的任何信息,所以验证和过滤用户的输入信息就变得非常重要,我们经常会在微博.新闻中听到某某网站被入侵了,存在什么漏洞,这些大多是因为网站对于用户输入的信息没有做 ...
- Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- PHP - 表单与验证
第11章 表单与验证 学习要点: 1.Header()函数 2.接收及验证数据 我们对Web感兴趣,认为它有用的原因是其主要通过基于HTML的表单发布和收集信息的能力.这些表单用来鼓励网站的反馈.进行 ...
- 前端MVC Vue2学习总结（五）——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
随机推荐
- Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- redis在linux服务器部署
0)参考资料 http://www.cnblogs.com/liuling/p/2014-4-19-02.html 1)下载安装包地址 http://download.redis.io/release ...
- [Debug] Dev tool Pause on caught exception
Chrome dev tool has "Pasue on caught exceptions" which is useful when there is expection t ...
- com.atomikos.datasource.ResourceException: XA resource 'masterDB': resume for XID异常
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/u014172271/article/det ...
- mouseleave([[data],fn])
mouseleave([[data],fn]) 概述 当鼠标指针离开元素时,会发生 mouseleave 事件.该事件大多数时候会与mouseenter 事件一起使用. 与 mouseout 事件不同 ...
- 005_linuxC++之_指针的引入
(一)直接看代码 #include <iostream> using namespace std; int add(int a){ a = a + ; return a; } int ad ...
- vue编辑、新增弹框（引用外部页面）
vue编辑.新增弹框(引用外部页面) 2018年06月15日 09:37:20 会飞的猪biubiu 阅读数 10265 版权声明:本文为博主原创文章,未经博主允许不得转载. https://b ...
- Java核心数据结构(List、Map、Set)原理与使用技巧
JDK提供了一组主要的数据结构实现,如List.Set等常用数据结构.这些数据都继承自java.util.Collection接口,并位于java.util包内. 一.List接口 最重要的三种Lis ...
- 删数问题（SDUT2072 ）
删数问题 Time Limit: 1000 msMemory Limit: 65536 KiB Problem Description 键盘输入一个高精度的正整数n(≤100位),去掉其中任意s个数字 ...
- 玩转orangpi 之frpc远程管理+pcd8544(nokia5110 屏幕) 显示运行状态
玩转orangpi 之frpc远程管理+pcd8544(nokia5110 lcd) 显示运行状态. 物件: orangepi一套(电源,网线,orangepiPC)110元 nokia 5110 l ...