<!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. LeetCode刷题--有效的括号（简单）

    题目描述 给定一个只包括 ' ( ' , ' )  ',  ' { ' , ' } ' , ' [ ' , ' ] ' 的字符串,判断字符串是否有效.有效字符串需满足: 左括号必须用相同类型的右括号闭 ...

  2. 第六章 Flask-WTF(二)

    Flask-WTF Flask-WTF是简化了WTForms操作的一个第三方库. WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板. 当然还包括一些其他的功能:CSRF保护,文件 ...

  3. django加载本地html

    django加载本地html from django.shortcuts import render from django.http import HttpResponse from django. ...

  4. border-width

    border-width 语法: border-width:<line-width>{1,4} <line-width> = <length> | thin | m ...

  5. Cogs 1345. [ZJOI2013] K大数查询(树套树)

    [ZJOI2013] K大数查询 /* 树套树写法. bzoj过不了. 可能有负数要离散吧. 线段树套线段树. 外层权值线段树,内层区间线段树维护标记. 对权值建一棵权值线段树. 某个点表示权值在某个 ...

  6. Noip2012 提高组 Day1 T1 Vigenère 密码

    题目描述 16 世纪法国外交家 Blaise de Vigenère 设计了一种多表密码加密算法――Vigenère 密 码.Vigenère 密码的加密解密算法简单易用,且破译难度比较高,曾在美国南 ...

  7. redis系列（一）：安装配置

    1.下载安装 下载可到redis官网下载(可根据自己的操作系统下载,我的是Ubuntu) 目前redis最新版本是5.0.2:下载地址为:http://download.redis.io/releas ...

  8. wait系列

    转自 http://blog.csdn.net/todd911/article/details/15028511 1.wait函数和waitpid函数 当一个进程正常或异常终止时,内核就向其父进程发送 ...

  9. Break Standard Weight （ZOJ 3706）

    Problem The balance was the first mass measuring instrument invented. In its traditional form, it co ...

  10. Spring Cloud Config（一）：聊聊分布式配置中心 Spring Cloud Config

    目录 Spring Cloud Config(一):聊聊分布式配置中心 Spring Cloud Config Spring Cloud Config(二):基于Git搭建配置中心 Spring Cl ...