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教程:边框属性border的极致应用
Apr 02 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 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通过串口实现发送短信
2015/07/08 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
python快速查找算法应用实例
2014/09/26 Python
Python生成随机密码
2015/03/10 Python
pytorch permute维度转换方法
2018/12/14 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
Python3并发写文件与Python对比
2019/11/20 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
护理专科毕业自荐信范文
2014/04/21 职场文书
说明书范文
2014/05/07 职场文书
大学生社会实践方案
2014/05/11 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
什么是css原子化,有什么用?
2022/04/24 HTML / CSS