H5中input type属性简写

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 属性与 <input type="text"> 或 <input type="password"> 配合使用。如果想要限制number长度，有以下两个参考：

1.type修改成“tel”，tel和number的不同之处在于，他们唤出的数字键盘略有不同

2.js控制

输入框为数字类型时防止maxlength属性不起作用

<input type="number" οninput="if(value.length>5)value=value.slice(0,5)" />

//输入框为数字类型时防止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));
        }
    }
});