【JavaScript学习笔记】【Input— —限制输入为数字之H5 vs JS vs 正则表达式】

【Javascript学习笔记】

目录

---

H5

优缺点

优点：简单快捷；
缺点：不够灵活；不可限制复杂数字，只适用于整数。

效果

代码

<input type="number" name="">
<input type="tel" name="">

---

JS

优缺点

优点：灵活多变，可读性强，可与正则表达协同用；
缺点：代码量较其他两种方式大。

代码

<p>与正则表达式运用</p>
<input type='text' onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" />

---

正则表达式

优缺点

正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式。

优点：仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑；
缺点：实现复杂规则的可读性难，不熟练者须多检查（用工具）是否编写正确。

代码

    <p>pattern="正则表达式"</p>
    <input type="text" pattern="\d">
    <input type="text" pattern="[0-9]*">
    <p>与JS事件运用</p>
    <input type='text' onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" />

常用的正则表达式

pattern的用法都一样，这里只是列出来一些常用的正则就好了：

信用卡 [0-9]{13,16}

银联卡 ^62[0-5]\d{13,16}$

Visa: ^4[0-9]{12}(?:[0-9]{3})?$

万事达：^5[1-5][0-9]{14}$

QQ号码： [1-9][0-9]{4,14}

手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

身份证：^([0-9]){7,18}(x|X)?$

密码：^[a-zA-Z]\w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线

强密码：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间

---

快捷链接

全部Javascript学习笔记的目录 Click Here>>
github源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~

---