HTML5新特性---Form表单前台通过正则表达式自动验证邮箱

在HTML5中Form表单中添加了许多新特性，下面为大家介绍一种form表单中的新属性pattern。

pattern 属性规定用于验证 input 域的模式（pattern），模式（pattern）是正则表达式。

注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

下面给大家一个我写的一个input="text" 文本输入框自动验证邮箱的例子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正则匹配邮箱</title>
</head>
<body><form action="">邮箱：<input type="text" pattern="^[a-zA-Z][0-9a-zA-Z]*@{1}[0-9a-zA-Z]+\.(com|net|cn|com\.cn)$"><br><input type="submit" value="提交"></form>
</body>
</html>

大家可以运行查看一下效果，只有在输入正确的邮箱格式时，才可以提交Form表单。

pattern模式，非常便捷的为我们提供了邮箱的验证。

紫皇雷帝

让学习成为一种习惯

转载于:https://blog.51cto.com/leidi/1607619

HTML5新特性---Form表单前台通过正则表达式自动验证邮箱相关推荐

html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
Form表单提交前进行JS验证的3种方式
1. 提交按钮的onclick事件中验证 <script type="text/javascript"> function check(form) { ...
form表单按enter键自动提交的问题
废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 1 <!doctype html> 2 <html lang="en"> 3 < ...
layui提交表单自动刷新_layui form表单提交后实现自动刷新
刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪 ...
ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]
正文一.资料 1.1. 表单提示的方式设置,如: Ext.form.Field.prototype.msgTarget='side' 该设置为枚举值:'qtip','side','title','u ...
JavaScript验证表单数据，HTML自动验证表单数据是否为空，数字范围
典型数据验证: a.字段是否为空: b.输入内容是否合法(例如数字字段是否输入了文本,email格式是否正确等) 数据验证时可通过javaScript进行表单验证,也可提交表单,在服务器端验证.通常情 ...
(总结1)HTML5中新增加的表单元素
HTML5中新增加了很多元素标签使用,在经过了近一星期多的学习之后现在进行一下总结,方便日后查阅: H5中的智能表单 1 <form action=""> 2 < ...
HTML5新特性知识点总结
一.HTML5特性 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: <canvas> 新元素标签描述 <canvas> 标签定义图形,比如图表和其他 ...
HTML5新特性总结 1
文章目录 HTML5 HTML5 浏览器支持 HTML5新元素 HTML5 Canvas 浏览器支持创建一个画布(Canvas) 使用 JavaScript 来绘制图像画线.画圆.写字.渐变效果 ...

HTML5新特性---Form表单前台通过正则表达式自动验证邮箱

HTML5新特性---Form表单前台通过正则表达式自动验证邮箱相关推荐

最新文章

热门文章