<!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实现表单输入验证的更多相关文章

  1. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  2. AngulairJS表单输入验证与mvc

    AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$ ...

  3. 微信小程序 --- 表单输入验证（手机号、邮箱验证、输入非空）

    js代码 Page({                   /**    * 页面的初始数据    */         data: {         indicatorDots: false,   ...

  4. Go-Web编程_表单_0x02_验证表单的输入

    开发Web的一个原则就是,不能信任用户输入的任何信息,所以验证和过滤用户的输入信息就变得非常重要,我们经常会在微博.新闻中听到某某网站被入侵了,存在什么漏洞,这些大多是因为网站对于用户输入的信息没有做 ...

  5. Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  6. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  7. PHP - 表单与验证

    第11章 表单与验证 学习要点: 1.Header()函数 2.接收及验证数据 我们对Web感兴趣,认为它有用的原因是其主要通过基于HTML的表单发布和收集信息的能力.这些表单用来鼓励网站的反馈.进行 ...

  8. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  9. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

随机推荐

  1. Web缓存Cache、Application、Session与ViewState

    在ASP.NET中,有很多种保存信息的对象.例如:APPlication,Session,Cookie,ViewState和Cache等,那么它们有什么区别呢?每一种对象应用的环境是什么? 方法 信息 ...

  2. JS 框架安全报告：jQuery 下载次数超过 1.2 亿次

    尽管 JavaScript 库 jQuery 仍被使用,但它已不再像以前那样流行.根据开源安全平台 Snyk 统计,目前至少十分之六的网站受到 jQuery XSS 漏洞的影响,甚至用于扩展 jQue ...

  3. yii 查询垃圾分类接口

    public function actionGarbage() { // $param = \Yii::$app->request->post('rubbish', ''); // 接收j ...

  4. loaction.reload(false)和location.reload(true)的区别

    loaction.reload(false)和location.reload(true)有差别啊,一个是先判断页面有没修改,有的话就从服务器下载页面,没有就直接从缓存里拿(这个会提升响应性能)而把该方 ...

  5. 转载：appium踩过的坑

    原文地址:http://blog.csdn.net/wirelessqa/article/details/29188665 自己的操作:由于在window上安装appium时,报各种错误:所以选择在u ...

  6. 《视觉SLAM十四讲》学习日志(一)——预备知识

    SLAM简介 : SLAM是 Simultaneous Localization and Mapping 的缩写,中文译作 " 同时定位与地图构建 ".它是指搭载特定传感器的主题, ...

  7. luogu2331

    P2331 [SCOI2005]最大子矩阵 题目描述 这里有一个n*m的矩阵,请你选出其中k个子矩阵,使得这个k个子矩阵分值之和最大.注意:选出的k个子矩阵不能相互重叠. 输入格式 第一行为n,m,k ...

  8. python的openpyxl的使用笔记

    openpyxl模块介绍 openpyxl模块是一个读写Excel 2010文档的Python库,如果要处理更早格式的Excel文档,需要用到额外的库,openpyxl是一个比较综合的工具,能够同时读 ...

  9. MySQL group_concat 介绍

    在做数据初始化的时候,由于需要修改满足条件的全部订单的状态,因此,想使用group_concat函数提取满足条件的所有订单id,以方便写回滚脚本.测试数据取自表test1,表结构和相关 insert ...

  10. 【C/C++】Linux的gcc和g++的区别

    Windows中我们常用vs来编译编写好的C和C++代码:vs把编辑器,编译器和调试器等工具都集成在这一款工具中,在Linux下我们能用什么工具来编译所编写好的代码呢,其实Linux下这样的工具有很多 ...