<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    <form onsubmit="testform()" novalidate="true">

        <label for="email"> 邮箱：</label>

        <input type="email" id="email" name="email" />

        <input type="submit" value="提交">

    </form>

</body>

<script>

    function testform() {

        var email = document.getElementById('email');

        if (email.value == '') {

            alert('请输入email！');

            return false;

        } else if (!email.checkValidity()) {

            alert('email的格式不正确！');

            return false;

        }

    }

</script>

</html>

兼容到IE10及以上

required 等属性也适用

input 的各种属性的验证 checkValidity兼容性的更多相关文章

  1. js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）

    js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...

  2. 表单input按钮在各浏览器之间的兼容性

    从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...

  3. 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

    今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. 这些 ...

  4. mvc中动态给一个Model类的属性设置验证

    原文:mvc中动态给一个Model类的属性设置验证 在mvc中有自带的验证机制,比如如果某个字段的类型是数字或者日期,那么用户在输入汉字或者英文字符时,那么编译器会自动验证并提示用户格式不正确,不过这 ...

  5. input type类型和input表单属性

    一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...

  6. ie8下修改input的type属性报错

    摘要: 现在有一个需求如图所示,当用户勾选显示明文复选框时,要以明文显示用户输入的密码,去掉勾选时要变回密文,刚开始想到的就是修改输入框的type来决定显示明文还是密文,使用jQuery的attr来做 ...

  7. 前端福利之表单input按钮在各浏览器之间的兼容性(转)

    从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...

  8. html5中 input的pattern属性 和 details/summary元素

    html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...

  9. jquery取<input>的readOnly属性，O要大写

    今天在jquery中取input的readonly属性时,发现 我这样写$(“#input”).readonly取这个属性时,总是undefined,后来一想,难道html中的属性only没有大写,是 ...

随机推荐

  1. POJ-3281(最大流+EK算法)

    Dining POJ-3281 这道题目其实也是网络流中求解最大流的一道模板题. 只要建模出来以后直接套用模板就行了.这里的建模还需要考虑题目的要求:一种食物只能给一只牛. 所以这里可以将牛拆成两个点 ...

  2. 靶场练习-Sqli-labs通关记录（盲注）

              0x00 实验环境 本地:Win 10 靶场:sqli-labs(共65关,每日一关) 0x02 通关记录 简介:一天一关! (5)第五关: 由于此处与前四关有明显的差别,故在此我 ...

  3. 零投资！零风险！手把手教你挖pi币

    为什么说PI币属于区块链4.0代币呢?我们先从人类社会的生产力生产关系的递进来做一波有利的证明! 原始社会--封建王朝--君主立宪--资本主义--社会主义 原始社会:社会物质财富分配既有弱肉强食也有按 ...

  4. 如何使用excel制作查分系统

    在工作学习中,我们经常会遇到使用excel制作查分系统这样的问题.培根说过:读书足以恬情,足以博采,足以长才.因此,面对使用excel制作查分系统我们应该有努力探索的精神.书到用时方恨少,事非经过不知 ...

  5. 医学图像配准 | Voxelmorph 微分同胚 | MICCAI2019

    文章转载:微信公众号「机器学习炼丹术」 作者:炼丹兄(已授权) 联系方式:微信cyx645016617(欢迎交流) 论文题目:'Unsupervised Learning for Fast Proba ...

  6. 两种常见Content-type的方便理解

    application/x-www-form-urlencoded:key=value键值对application/json:{name:"张三"} JSON字符串塞到请求的bod ...

  7. Windows下的Linux子系统

    强调!!!必须是Windows专业版!!! 一.安装运行过程 第一步:打开开发人员模式 第二步:进入 '控制面板 '--'程序'--'启用的Windows功能'--勾选Linux子系统(根据提示进行重 ...

  8. c++ 反汇编 异常处理

    c++异常处理 int main(){ try { throw 1; } catch ( int e ) { printf("catch int\r\n"); } catch ( ...

  9. concurrentHashMap扩容相关方法详解

    上一个博客中说到了concurrentHashMap的put操作,在put操作之后如果添加了节点,我们首先会把全局的节点数+1,如果满足了扩容条件,我们则进行扩容 我们先从addCount方法说起 / ...

  10. java例题_41 利用递归给猴子分桃

    1 /*41 [程序 41 猴子分桃] 2 题目:海滩上有一堆桃子,五只猴子来分.第一只猴子把这堆桃子平均分为五份,多了一个,这只猴子把 3 多的一个扔入海中,拿走了一份.第二只猴子把剩下的桃子又平均 ...