资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

HTML5表单属性和验证方式的示例分析

这篇文章主要介绍了HTML5表单属性和验证方式的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联专注于广宗网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供广宗营销型网站建设,广宗网站制作、广宗网页设计、广宗网站官网定制、重庆小程序开发公司服务,打造广宗网络公司原创品牌,更为您提供广宗网站排名全网营销落地服务。

在HTML5的众多变化中,表单数据合法性和有效性验证是极为重要的一部分。实践证明:大量安全问题是因为表单数据没有进行合法性和有效性验证而引起的。由于表单数据没有进行合法和有效性验证而被攻击和入侵,进而导致数据泄露和安全事故,对政府、企业和个人等都造成

了巨大的损失。

同时,也有很大一部分设计师和制作人员,由于不太会编写浏览器端的数据验证程序,也因为各种原因不太会使用网上的一些框架,导致有些产品缺少对表单数据进行合法性和有效性验证,留下了安全隐患。

鉴于此,HTML5在表单属性和验证其合法性方面进行了规范,大大地节省了浏览器端的代码量,提高了代码效率,也统一了安全问题。虽然服务器端依然需要验证,但已经有效地从两端(客户端和服务器端)中的一端解决了问题。因此,我们更愿意称之为进化,而不是变化。

下面我们将一一讲解其重要属性。正则表达式部分我们只作一些常用的内容过滤介绍,有兴趣的读者可以深入研究一下。

(1) 必填项属性required。防空白提交的写法可以是

或者

(2) 占位属性placeholder,即还未输入内容的input中默认显示的占位字符。具体写法如下:

(3) 数字类型控件提供的max、min属性。

(4) 正则表达式属性pattern。正则表达式判断只能填写a~z、A~Z和0~9内的字符,具体代码如下:

(5) data属性,可外联数据源,例如:

(6) 自动完成属性autocomplete。这是一个双向属性,它开启时可以帮助用户尽快完成表单填写,关闭后又可以防止泄露个人隐私数据。如果希望替用户在第二次填写表单时能够快速填写完单,节省时间,则可以设定autocomplete 的值为on。

具体写法如下:

如果希望整个表单都能够自动完成,则可以这样写:

如果不希望替用户保存电子邮件地址,则可以设定autocomplete 的值为off,用来防止恶意猜想用户信息,具体写法如下:

(7) 步长设定属性step。该属性可以限制输入的数字,step为上一个数字与下一个数字的间隔,例如:

(8) 其他新增属性。除了上述几个属性外,还有几个新增属性,简要介绍如下。

 onerror。当发生错误时运行脚本。

 onhaschange。当发生变化时运行脚本。

 oncontextmenu。当触发上下文菜单时运行脚本。

 onformchange。当表单改变时运行脚本。

 onforminput。当表单获得用户输入时运行脚本。

 oninput。当元素获得用户输入时运行脚本。

 oninvalid。当元素无效时运行脚本。

感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5表单属性和验证方式的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


名称栏目:HTML5表单属性和验证方式的示例分析
本文链接:http://cdkjz.cn/article/ggdood.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220