热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

javascript-html5中的input的type属性已经有tel、number、email的,还需要写正则去验证的吗?

1、html5中的input的type属性已经有tel、number、email的,还需要写正则去验证的吗?2、html5中的input的type属性总共是新增了13个,我把这13个总结了一下,分别是type的这些属性:color(定义拾色器)、date(定...
1、html5中的input的type属性已经有tel、number、email的,还需要写正则去验证的吗?
2、html5中的input的type属性总共是新增了13个,我把这13个总结了一下,分别是type的这些属性:color(定义拾色器)、date(定义日期字段)、datetime(定义日期字段)、datetime-local(定义日期字段)、month(定义日期字段的月)、week(定义日期字段的周)、time(定义日期字段的时、分、秒)、email(定义用于 e-mail 地址的文本字段)、number(定义带有 spinner 控件的数字字段)、range(定义带有 slider 控件的数字字段)、search(定义用于搜索的文本字段)、tel(定义用于电话号码的文本字段)、url(定义用于 URL 的文本字段)。
平时在做网站的时候用的很少,大家平时写的时候直接用这些的呢,还是需要自己去写正则的,还是用其他标签的去模拟代替的呢?
3、求助一下各位对HTML5新增的这13个type属性的新看法?

回复内容:

1、html5中的input的type属性已经有tel、number、email的,还需要写正则去验证的吗?
2、html5中的input的type属性总共是新增了13个,我把这13个总结了一下,分别是type的这些属性:color(定义拾色器)、date(定义日期字段)、datetime(定义日期字段)、datetime-local(定义日期字段)、month(定义日期字段的月)、week(定义日期字段的周)、time(定义日期字段的时、分、秒)、email(定义用于 e-mail 地址的文本字段)、number(定义带有 spinner 控件的数字字段)、range(定义带有 slider 控件的数字字段)、search(定义用于搜索的文本字段)、tel(定义用于电话号码的文本字段)、url(定义用于 URL 的文本字段)。
平时在做网站的时候用的很少,大家平时写的时候直接用这些的呢,还是需要自己去写正则的,还是用其他标签的去模拟代替的呢?
3、求助一下各位对HTML5新增的这13个type属性的新看法?

不管前端验不验证,后端都一定要验证。

这些类型只是方便浏览器显示不同的控件,并且在手机上会调用不同的键盘,但本质上都是字符串,传到后端都没法保证格式的正确。

前端验证只是用户体验更好,不用像后端验证那样跳转页面(AJAX不用跳转,但还是要传输数据),但是没法保证数据的有效性。

关于这点需要明确一下
type并不能作为验证依据,
type字段只是为输入提供选择格式,
更多情况下应该说新增的type是为了适配移动端web app的存在
例如说当type=tel的时候,在手机上打开页面会出现电话键盘(不是数字键盘,两者并不一样,电话键盘还包括*#)
type=email的时候,会出现带@.com符号的全键盘(各设配各系统实现貌似有差异)
所以才要有pattern的存在,
当触发表单提交的时候,浏览器会将输入与pattern属性做匹配来最终判断是否有效输入
当然了,后端验证数据有效性就在此问题的范畴之外了

PS 刚刚又试了一下,chrome下当type=email或者type=url的时候,触发提交,就算没有pattern也会对输入内容进行检查然后提示,但是type=tel却没有,Safari下则是全部都没有进行内容检查,这就是浏览器产商各自实现的差异了,为了保持浏览器行为的一致性,都应该加上pattern属性

作为一个WEB开发者要考虑 前端用户输的数据都是不可信的 都是有可能会有恶意代码的 后端都要做验证

前后端验证不是可选,而是必须的!况且新增的一些属性在个别手机浏览器上存在兼容问题!

不考虑后端验证,只是说前端验证的话. 该需要验证的地方还是需要验证
比如说 html5 type = email,number等浏览器给你验证了, 但是tel就没有,不知道你是手机号还是座机,tel输入字母也没有做验证。
总的来说,按照具体需求弥补缺失的验证。

@funkyLover 说的挺好。

至于你前两个问题,我认为取决于你的开发需求:对于输入的值的格式、以及浏览器兼容性,有多么严格的要求?

  • 如果数据最终只是用来给人看看而已(比如普通网站的一些个人信息),并且不用兼容早期的浏览器,那么这些type属性自带的验证机制就足够了。

  • 反之,如果数据会被机器利用(比如自动发邮件)或者是关键信息(比如中介网站里的联系电话),或者要兼容早期浏览器(不支持HTML5),那么需要写前端验证功能代码。


推荐阅读
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • ECMA262规定typeof操作符的返回值和instanceof的使用方法
    本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
  • pyecharts 介绍
    一、pyecharts介绍ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部 ... [详细]
  • 《Axure新技能:自适应手机屏幕大小》相信不少人都已经看过,并对设置方法已经很熟悉了,但该教程只能适应iphone6的屏幕尺寸的比例&# ... [详细]
  • 文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议(超文本传输协议)是用于从WWW服务 ... [详细]
  • 最近在学Python,看了不少资料、视频,对爬虫比较感兴趣,爬过了网页文字、图片、视频。文字就不说了直接从网页上去根据标签分离出来就好了。图片和视频则需要在获取到相应的链接之后取做下载。以下是图片和视 ... [详细]
  • 前端提高篇(七十):SVG基本使用、基本样式、路径path
    SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范,与html5的使用有所区别SVG绘制出来的是矢量图,放大之后不会失真官方文 ... [详细]
  • Scrapy 爬取图片
    1.创建Scrapy项目scrapystartprojectCrawlMeiziTuscrapygenspiderMeiziTuSpiderhttps:movie.douban.c ... [详细]
  • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
  • macOS Big Sur全新设计大版本更新,10+个值得关注的新功能
    本文介绍了Apple发布的新一代操作系统macOS Big Sur,该系统采用全新的界面设计,包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出,macOS Big Sur的设计与iPadOS越来越接近,结合了去年iPadOS对鼠标的完善等功能。 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
author-avatar
ngzhaicai9672364
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有