HTML5实现表单自动验证功能实例代码


Posted in HTML / CSS onJanuary 11, 2017

  在HTML5 中,在增加了大量的表单元素与属性的同时,也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能,接下来我们来讲一下自动验证。

在Html5中,通过对元素使用属性的方法,可以实现在表单提交时执行自动验证的功能,在执行代码后,将在表单提交时自动验证输入的内容是否为数字,如果验证通不过,将显示错误信息文字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="text" required pattern="^\w.*$">
            <input type="submit" value="提交">
    </form>
</body>
</html>

接下来我们来看一下在html5 中追加的关于对元素内输入内容进行限制的属性的指定。

1.required属性

html5 中新增的required属性可以应用在大多数输入元素上(除了隐藏元素,图片元素按钮上)。在提交时,如果元素中内容为空白。则不允许提交,同时在浏览器中显示信息提示文字,提示用户这个元素中必须输入内容,效果如图

HTML5实现表单自动验证功能实例代码

2.pattern属性

之前提到的新增的input元素,比如email,number,URL等,要求输入内容符合一定的格式,对input元素使用pattern属性,并且将属性值设置为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提交输入的内容必须符合给定格式,代码如下,要求输入内容为一个数字与3个大写字母:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            请输入指定内容:<input pattern="[0-9][A-Z]{3}" name="part" placeholder="输入:一个数字三个大写字母">
            <input type="submit" value="提交">
    </form>
</body>
</html>

执行效果如下:

HTML5实现表单自动验证功能实例代码

3.min属性与max属性

min与max这两个属性是日期类型或数值类型的input元素的专用属性,他们限制了在input元素中输入的数值与日期的范围。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="post">
            请输入数值:<input type="number" name="point" min="0" max="100" />
            <input type="submit" value="提交">
    </form>
</body>
</html>

执行效果如下:

HTML5实现表单自动验证功能实例代码

4.step属性

step属性控制input元素中的值增加过减少时的步骤。例如当你想让用户输入的值在0与100之间,但必须是5的倍数时,你可以指定step为5,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证示例</title>
</head>
<body>
    <form action="#" method="get">
      <input type="number" name="point" step="5" />
      <input type="submit" />
    </form>
</body>
</html>

效果如下:

HTML5实现表单自动验证功能实例代码

希望针对于这些表单的新属性,大家可以有个更深刻的认识!如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
Dec 14 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 #HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 #HTML / CSS
HTML5文档结构标签
Apr 21 #HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 #HTML / CSS
html5的localstorage详解
May 09 #HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 #HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 #HTML / CSS
You might like
php获取字段名示例分享
2014/03/03 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
JS实现简单打字测试
2020/06/24 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
python在非root权限下的安装方法
2018/01/23 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
django-csrf使用和禁用方式
2020/03/13 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
2020/11/17 Python
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
公务员综合考察材料
2014/02/01 职场文书
小学生家长评语大全
2014/02/10 职场文书
知识竞赛主持词
2014/03/26 职场文书
设计顾问服务计划书
2014/05/04 职场文书
目标责任书格式
2014/07/28 职场文书
电工实训报告总结
2014/11/05 职场文书
教师创先争优承诺书
2015/04/27 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang