前端测试 记录一次无意间测出来手机号输入的 bug,需要大家帮忙分析下原因

无染 · 2022年07月30日 · 最后由 陈锦涛 回复于 2022年08月01日 · 6926 次阅读

在测试 H5 输入手机号时发现,如果输入框使用了如下代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="Accept.html" method="POST">
            <input placeholder="" maxlength="11"  type="number" oninput="if(value.length>11){value=value.slice(0,11)}">
        </form>
    </body>
</html>

1.,则可以输入字母 e 和 E;

2.如果输入完 11 位数字后输入 “-” 则可以继续输入使 11 位限制无效;

共收到 7 条回复 时间 点赞

我记得 number 类型不支持 maxlenth,所以可以直接输入超过 11 位。不过你后面 slice 了前 11 位,最终可能也就长得不好看,还是能用的。

了解一下科学计数法

所以后端还得校验一次😂

Ouroboros 回复

是的,我查询了下 number 类型不支持 maxlenth,后边的做了 11 位限制,不过输入"-"后这个 11 位限制就不生效了,还未找到原因

我去催饭 回复

我个人认为前后端都需要校验

回复

我去了解下

7楼 已删除
无染 回复

当 input type="number"的时候,除了数字还可以输入 + - e 这三个字符 (e 一般指自然常数,约为 2.71828,数学计算用得到;+ -是表示正负数字);而且当输入框中存在 + - e 这三个字符的时候,value 值取到的是空字符 ' ' ,所以不满足 value.length>11,不会去执行 value=value.slice(0,11)(具体为啥取不到我也没找到原因);有了解的兄弟可以回复一下

需要 登录 後方可回應,如果你還沒有帳號按這裡 注册