<!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. 清除浏览器默认样式的reset.css(转载于reset.css的官方)

    /* http://meyerweb.com/eric/tools/css/reset/ v2.0-modified | 20110126 License: none (public domain) ...

  2. java 集合 + 常见面试题

    1.1. 集合概述 1.1.1. Java 集合概览 从下图可以看出,在 Java 中除了以 Map 结尾的类之外, 其他类都实现了 Collection 接口. 并且,以 Map 结尾的类都实现了 ...

  3. LeetCode-二叉树的深度

    二叉树的深度 二叉树的深度 使用递归求解二叉树的深度. 需要注意使用的临界条件. /** * 任意一个二叉树的最大深度 **/ #include<iostream> #include< ...

  4. webstorm2020.3安装破解教程

    免责声明:本教程及相关附件仅限于学术交流,不能用于商业以及违法用途,请于下载后24小时内删除!如产生法律纠纷,一切与本人无关,呼吁各位小伙伴支持下正版软件.本文如有侵权,请联系小编删除之. 该操作是用 ...

  5. C#关于个Base64,MD5,16进制的转换

    1,待签名数据以UTF-8的格式转字节流,对字节流进行MD5算法得到的签名字节流,再转换为16进制字符串,即生成了数字签名. byte[] targetData = md5.ComputeHash(S ...

  6. RPC基础以及造一个RPC的轮子需要注意些什么

    RPC基础以及造一个RPC的轮子需要注意些什么 前言 rpc即远程过程调用,是分布式系统常用的通信方法.远程可以是在一台机器上的不同进程或在不同一个机器上的不同进程.rpc更看重速度,像调用本地方法一 ...

  7. PHP配置 2. 日志相关配置

    例如,在disable_functions,定义禁用phpinfo函数, # vim /usr/local/php/etc/php.ini disable_functions=phpinfo,eval ...

  8. 如何使用jQuery $.post() 方法实现前后台数据传递

    基础方法为 $.post(URL,data,callback); 参数介绍: 1.URL 参数规定您希望请求的 URL. 2.data 参数规定连同请求发送的数据. 3.callback 参数是请求成 ...

  9. 半监督学习方法（Semi-supervised Learning）的分类

    根据模型的训练策略划分: 直推式学习(Transductive Semi-supervised Learning) 无标记数据就是最终要用来测试的数据,学习的目的就是在这些数据上取得最佳泛化能力. 归 ...

  10. 微信小程序实现搜索关键词高亮

    目录 1,前言 2,思路 3,代码逻辑 1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链 ...