javascript使用正则控制input输入框允许输入的值方法大全

JavaScript使用正则控制input输入框允许输入的值方法大全

在开发前端网页时，有时我们需要对输入框的输入内容进行限制，只允许输入特定类型的数据，这时就可以使用JavaScript的正则表达式来控制。

以下列出了几种常见的限制方式和相应的正则表达式：

限制只允许输入数字

<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/g,'')">

这段代码包含的正则表达式/[^\d]/g通过排除非数字字符的方式，只允许输入数字（即0~9）。

限制只允许输入英文字母

<input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">

这段代码包含的正则表达式/[^a-zA-Z]/g通过排除非英文字母的方式，只允许输入大小写字母（即a~z和A~Z）。

限制只允许输入数字和英文字母

<input type="text" onkeyup="this.value=this.value.replace(/[^0-9a-zA-Z]/g,'')">

这段代码包含的正则表达式/[^0-9a-zA-Z]/g通过排除非数字和英文字母的方式，只允许输入数字和大小写字母。

限制只允许输入中文

<input type="text" onkeyup="this.value=this.value.replace(/[^\u4E00-\u9FA5]/,'')">

这段代码包含的正则表达式/[^\u4E00-\u9FA5]/通过排除非汉字的方式，只允许输入中文。

其他限制方式

• 限制只允许输入特定长度的内容

  <input type="text" onkeyup="this.value=this.value.replace(/^(.{5}).*$/,'$1')">

  这段代码包含的正则表达式/^(.{5}).*$/通过匹配前5个任意字符，然后取出这5个字符，从而限制了输入框内容的长度。

• 限制只允许输入特定格式的内容

  <input type="text" onkeyup="this.value=this.value.replace(/^[a-zA-Z]\w{5,17}$/g,'')">

  这段代码包含的正则表达式/^[a-zA-Z]\w{5,17}$/g通过限制输入第一个字符为字母，后续字符为数字和字母的方式，只允许输入特定格式的内容（字母开头，6-18个字符）。

以上的简单示例代码可以帮助您理解如何使用正则表达式限制输入框的输入内容，您可以根据需求自行更改相关正则表达式以达到对应的限制效果。