<!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. JDK源码那些事儿之我眼中的HashMap

    源码部分从HashMap说起是因为笔者看了很多遍这个类的源码部分,同时感觉网上很多都是粗略的介绍,有些可能还不正确,最后只能自己看源码来验证理解,写下这篇文章一方面是为了促使自己能深入,另一方面也是给 ...

  2. php 的一个异常处理程序

    <?php//exceptionHandle.php xiecongwen 20140620 //define('DEBUG',true); /** * Display all errors w ...

  3. SIGAI机器学习第十四集 支持向量机1

    讲授线性分类器,分类间隔,线性可分的支持向量机原问题与对偶问题,线性不可分的支持向量机原问题与对偶问题,核映射与核函数,多分类问题,libsvm的使用,实际应用 大纲: 支持向量机简介线性分类器分类间 ...

  4. java线程安全与不安全的理解

    存在成员变量(全局变量)的类用于多线程时是不安全的,不安全体现在这个成员变量可能发生非原子性的操作,而变量定义在方法内也就是局部变量是线程安全的. 想想在使用struts1时,不推荐创建成员变量,因为 ...

  5. 检查errno

    转自 http://blog.csdn.net/todd911/article/details/9132095 很多库函数,特别是那些与操作系统有关的,当执行失败时会通过一个名称为errno的外部变量 ...

  6. 常用SQL之日期格式化和查询重复数据

    本文列举一些工作中常用的SQL,以提升工作效率. 1 日期格式化 使用 DATE_FORMAT(get_date, '%Y-%m-%d') 函数进行格式化.其中:get_date 是需要被格式化的字段 ...

  7. Docker安装mysql5.6

    1.docker hub 上查找mysql镜像 2.在docker hub上(阿里云加速器)拉取mysql镜像到本地标签为5.6 3.使用mysql5.6创建容器(也叫运行镜像) 4.交互运行,进入m ...

  8. ajax调用c#后端，发现参数没数值

    之前是int的数据,名字是id 后面被改成字符串的数据,名字是encrptedId 因为名字不匹配,导致找不到数值.只需要把js里调用传递的参数名字改一下,或者C#后端,继续保持原来的名字

  9. VS Code文本编辑快捷操作(2)

    1.  光标移动         移动光标最常用的就是方向键,但是方向键每次只能把光标移动一个位置,可以说是一种相对低效的方式.下面介绍针对单词.行.代码块.整个文档等多种光标移动方式.   1.1 ...

  10. [Oracle]察看一张表的约束 和 察看一张表的索引

    --察看一张表的约束select table_name,constraint_name,constraint_type from user_constraints where table_name=u ...