作者:丰田高耗能妨功害能侠盗飞车_948 | 来源:互联网 | 2023-09-06 18:02
1、html5中的input的type属性已经有tel、number、email的,还需要写正则去验证的吗?
2、html5中的input的type属性总共是新增了13个,type属性:
color(定义拾色器)
date(定义日期字段)
datetime(定义日期字段)
datetime-local(定义日期字段)
month(定义日期字段的月)
week(定义日期字段的周)
time(定义日期字段的时、分、秒)
email(定义用于 e-mail 地址的文本字段)
number(定义带有 spinner 控件的数字字段)
range(定义带有 slider 控件的数字字段)
search(定义用于搜索的文本字段)
tel(定义用于电话号码的文本字段)
url(定义用于 URL 的文本字段)
但是,type
并不能作为验证依据, type字段只是为输入提供选择格式,更多情况下应该说新增的type是为了适配移动端web app的存在
例如,说当type=tel
的时候,在手机上打开页面会出现电话键盘(不是数字键盘,两者并不一样,电话键盘还包括*
和#
)
当type=email
的时候,会出现带@
和.com
符号的全键盘(各设配各系统实现貌似有差异)
所以才要有pattern
的存在,当触发表单提交的时候,浏览器会将输入与pattern属性做匹配来最终判断是否有效输入
当然了,后端验证数据有效性就在此问题的范畴之外了
PS 刚刚又试了一下,chrome下当type=email
或者type=url
的时候,触发提交,就算没有pattern
也会对输入内容进行检查然后提示,但是type=tel
却没有,Safari下则是全部都没有进行内容检查,这就是浏览器产商各自实现的差异了,为了保持浏览器行为的一致性,都应该加上pattern
属性
另外,对于input type设置成number时maxlength属性失效的问题,可以查看W3C文档说明:
maxlength 属性与 或 配合使用。如果想要限制number长度,有以下两个参考:
1.type修改成“tel”,tel和number的不同之处在于,他们唤出的数字键盘略有不同
2.js控制
输入框为数字类型时防止maxlength属性不起作用
//输入框为数字类型时防止maxlength属性不起作用
$('input').bind('input propertychange', function() {
if($(this).attr("type")=="number"){
//获取输入框的最大长度
var mxaL= $(this).attr("maxlength");
//如果输入的长度超过最大长度
if($(this).val().length>mxaL){
$(this).val($(this).val().slice(0,mxaL));
}
}
});