JS基础测试41 - 手机号验证

[JaimeCheng]

题目：

原issue

回答：

// 我的回答
// 1
strTel = strTel.trim()

// 2
strTel = toCDB(strTel)
function toCDB(str) {
  var tmp = '';
  for (var i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
      tmp += String.fromCharCode(str.charCodeAt(i) - 65248)
    }
    else {
      tmp += String.fromCharCode(str.charCodeAt(i))
    }
  }
  return tmp
}

// 3
strTel = strTel.replace(/^\+86/, '')

// 4
strTel = strTel.replace(/[^0-9]+/g, '').length === 11 ? strTel.replace(/[^0-9]+/g, '') : strTel

// 5
/^1\d{10}$/g

满分回答 | []()

总结：

1. 交互体验的重要性；
2. 第4题考虑不周全，eg. 同时支持输入邮箱和手机号且邮箱有12位数字部分。 > 在线demo <

[JaimeCheng]

zxx: 本期要点：

1. 去除前后空格：xxx.trim()，trim()不止过滤普通空格（Space键敲出来的空格），IE9+，如果想要兼容IE8，xxxx.replace(/^\s|\s$/g, "")。
2. 全角转半角String.fromCharCode(str.charCodeAt(i)-65248)是常规方法，适用于任何全角字符。本期可以只考虑数值的全角转半角，reduce()是一种方法（参考Seasonley的回答），还有const doubleByteNums = '０１２３４５６７８９';strTel.replace( new RegExp('[０-９]', 'g'), matched => doubleByteNums.indexOf(matched))或者使用映射dict = { "０": 0,"１": 1, "２": 2,"３": 3,"４": 4, "５": 5, "６": 6, "７": 7, "８": 8, "９": 9, }进行替换。注意：只有全角才需要code减值。
3. /^+86/
4. 需要数字个数匹配。因为输入框可能既支持输入手机号，又支持邮箱。
5. /^1\d{10}$/
6. 本小测的初衷：一个普通的手机账号输入框体验做好是不容易的事情。大部分的开发，都只是完成字符串前后空格的过滤就结束了，测试同学测试呢，也是可以通过的。啊，但实际上这并不是一个非常好的体验实现，正如我公众号文章（ https://mp.weixin.qq.com/s/3iYaxKJLjLo_gWgb8lvabw ）所讲的那样，做前端要想交互体验做到非常好，需要扎实的技术和经验积累作为前提的。例如输入框粘贴的时候自动在剪切板层把字符过滤，这个是需要技术积累的，需要对剪切板对象比较了解。 又例如全角半角的转化，以及+86的过滤这都需要足够多的经验的。讲这个的目的是想让大家知道做前端开发要想做的东西非常好，关键是把技术给好好积累，充分扎实，这个是做小测的目的，也是你竞争力所在。