素材牛VIP会员
html5中的input的type属性已经有tel、number、email的,还需要写正则去验证的吗?
 阿***灯  分类:Html5  人气:980  回帖:7  发布于6年前 收藏

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属性的新看法?

讨论这个帖子(7)垃圾回帖将一律封号处理……

Lv6 码匠
旧**** 软件测试工程师 6年前#1

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

Lv4 码徒
铁***1 JS工程师 6年前#2

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

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

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

Lv5 码农
wg***ge 页面重构设计 6年前#3

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

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

Lv6 码匠
Fo***ou 职业无 6年前#4

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

Lv4 码徒
阿***阿 产品经理 6年前#5

@funkyLover 说的挺好。

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

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

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

Lv4 码徒
蝶***7 UI设计师 6年前#6

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

Lv5 码农
迷***雾 软件测试工程师 6年前#7

type本身就只是一种方便的定义 你还是需要自己去写 并且type是可修改的 所有前端数据都不可信 所以后端必须验证 而前端即使你在type定义了 在js中也请再次验证 毕竟type直接进行的提示并不友好 而且 比如你去做个测试 email这个type 只要字符串带@就通过了 这本身就没有可靠性 而且在h5关于type的新特性上有说明 只是方便使用 但是请开发者再进行验证

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取