<!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. script标签中的async、defer属性

    Script标签是我们常用的引用js脚本的一种方式. 撸代码的时候,我们常常只写src属性,直接忽略其他属性. 最近发现了2个可以利用的属性:async.defer. 顾名思义async就是异步,在不 ...

  2. Elasticsearch: nested对象

    在处理大量数据时,关系数据库存在很多问题. 无论是速度,高效处理,有效并行化,可扩展性还是成本,当数据量开始增长时,关系数据库都会失败.该关系数据库的另一个挑战是必须预先定义关系和模式.Elastic ...

  3. 向导中的参数传递 wizard param

    1.在向导页中使用WizardPage.this.getNextPage()方法可以获取到下一页的向导页: 2.在向导wizard中addPages()方法初始化的时候把整个页面传进去. 例:Wiza ...

  4. 程序装载：“640K内存”真的不够用么？

    本文源于size_t的说明,看到比尔盖茨说过:640K内存对于任何人来说都足够了,所以找了一篇文章,学习一下~~ 一直以来都知道自己有关计算机底层的知识不是不扎实,前段时间跟着大佬们推荐在[极客时间] ...

  5. BZOJ 2095 [Poi2010]Bridges (二分+最大流判断混合图的欧拉回路)

    题面 nnn个点,mmm条双向边(正向与反向权值不同),求经过最大边权最小的欧拉回路的权值 分析 见 commonc大佬博客 精髓就是通过最大流调整无向边的方向使得所有点的入度等于出度 CODE #i ...

  6. 【leetcode】1240. Tiling a Rectangle with the Fewest Squares

    题目如下: Given a rectangle of size n x m, find the minimum number of integer-sided squares that tile th ...

  7. PHP mysqli_connect_error() 函数

    返回上一次连接错误的错误描述: <?php $con=mysqli_connect("localhost","wrong_user","my_p ...

  8. MySQL 8.0.15 配置 MGR单主多从

    转载自:http://www.cnblogs.com/zhangzihong/p/10443526.html 一.简介 MySQL Group Replication(简称MGR)字面意思是mysql ...

  9. char 类型的数组转换到CSting

    首先,字符串“abc”在CString的保存格式是‘a’,'\0','b','\0','c','\0','\0','\0'; 从中可以看出它是以‘\0’,'\0',结束的. 当char ch[6]: ...

  10. LOJ2537. 「PKUWC2018」Minimax [DP，线段树合并]

    传送门 思路 首先有一个\(O(n^2)\)的简单DP:设\(dp_{x,w}\)为\(x\)的权值为\(w\)的概率. 假设\(w\)来自\(v1\)的子树,那么有 \[ dp_{x,w}=dp_{ ...