<!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. iar8.32版本关于cmsis的说明

    平台是cubemx5.3 keil5.26 带freertos,使用iar8.32,在上图中的use cmsis 打勾与否都能编译通过.

  2. php基本语法形式

    站长新闻: 备注:目前有很多人通过李书记博客找到我,请教各种关于问题,而我这段时间是比较忙的,有时候真的是有心无力,网站更新也少了,希望大家见谅!还有很多phper希望我找下关于php相关的技术文档我 ...

  3. 将 Python 程序打包成 .exe 文件

    1.简介 做了一个excel的风控模板,里面含有宏,我用python的第三方xlwings部署到linux后发现,linux环境并不支持xlwings. Python 程序都是脚本的方式,一般是在解析 ...

  4. mysql查看当前所有数据库中的表大小和元信息information_schema

    查看所有mysql数据库表和索引大小 mysql查看当前所有的数据库和索引大小 ,),' mb') as data_size, concat(,),'mb') as index_size from i ...

  5. JQuery 实践---创建元素包装集

    1. 利用选择器,选择将被JQuery包装的元素 标识和选择DOM元素.JQuery采用我们已经知道的CSS语法并且扩展了一些.为了利用JQuery来选择元素,请把选择器包装在$()中. 基本CSS选 ...

  6. Activiti服务类- RepositoryService服务类

    Activity服务类-1 RepositoryService服务类一共47个接口1.创建部署//开始创建一个新的部署.DeploymentBuilder createDeployment(); 2. ...

  7. js批量下载文件

    ​关于兼容性问题:   <a href="xxx.docx" target='_blank'></a>   下载文件时,这种写法是没有兼容性问题:但是下载图 ...

  8. js的数组在内存中是如何存储的

    前言:本来想自己总结下,但发现以下文章已经写得很好,就直接放链接了. 英文文章:http://voidcanvas.com/javascript-array-evolution-performance ...

  9. nodejs基础 用http模块 搭建一个简单的web服务器 响应JSON、html

    前端在开发中,大多会想浏览器获取json数据,下面来用nodejs中的http模块搭建一个返回json数据的服务器 var http = require("http"); var ...

  10. SpringMVC--DispatcherServlet

    DispatcherServlet 是前端控制器设计模式的实现,提供 Spring Web MVC 的集中访问点,而且负责职责的分派,而且与 Spring IoC 容器无缝集成,从而可以获得 Spri ...