### JavaScript 控制 input 只允许输入的指定内容详解
#### 概述
在网页表单设计中，确保用户输入的数据符合预期格式是非常重要的一步。利用 JavaScript 对 input 输入框进行限制，能够有效提升用户体验并减少后端处理数据时可能出现的问题。本文将详细介绍如何使用 JavaScript 实现对 input 输入框内允许输入内容的控制。
#### 一、只允许输入数字
在很多场景下，如年龄、价格等，我们只需要用户输入数字。可以通过以下方式实现：
```html
<input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,'')" />
```
这里的正则表达式 `/\D+/g` 表示匹配所有非数字字符，并用空字符串替换掉它们。
#### 二、只允许输入英文字母、数字和下划线
在用户名输入框中，常常允许用户输入英文字母、数字以及下划线。有两种实现方法：
1. **禁用IME模式**：
```html
<input name="username" type="text" style="ime-mode:disabled" />
```
这种方法通过设置 `ime-mode` 的 CSS 属性来禁用输入法编辑器（IME），从而仅限于输入英文字符。
2. **使用正则表达式**：
```html
<input name="username" type="text" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" />
```
正则表达式 `/[^\w\.\/]/ig` 匹配除了字母、数字、下划线以及某些特殊字符（`.` 和 `/`）之外的所有字符，并将其替换为空字符串。
#### 三、只允许输入英文字母、数字和特定符号（例如=@#）
有时候我们需要允许用户输入特定的符号，比如 `=@#`。可以通过修改正则表达式实现：
```html
<input name="username" type="text" onkeyup="value=value.replace(/[^\w=@#]|_/ig,'')" />
```
这里 `/[^\w=@#]|_/ig` 表示除了字母、数字、下划线和 `=@#` 之外的所有字符都将被替换为空字符串。
#### 四、只允许输入汉字
如果希望用户只输入汉字，可以使用以下代码：
```html
<input name="username" type="text" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" />
```
这里的正则表达式 `[^\u4E00-\u9FA5]` 匹配所有非汉字字符。
#### 五、正则表达式的高级用法
除了上述基本应用外，还可以使用更复杂的正则表达式来满足更具体的需求：
1. **只能输入n位的数字**：`"^\d{n}$"`
2. **只能输入至少n位的数字**：`"^\d{n,}$"`
3. **只能输入m~n位的数字**：`"^\d{m,n}$"`
4. **只能输入零和非零开头的数字**：`"^(0|[1-9][0-9]*)$"`
5. **只能输入有两位小数的正实数**：`"^[0-9]+(\.[0-9]{2})$"`
6. **只能输入有1~3位小数的正实数**：`"^[0-9]+(\.[0-9]{1,3})$"`
7. **只能输入非零的正整数**：`"^\+[1-9][0-9]*$"`
8. **只能输入非零的负整数**：`"^\-[1-9][0-9]*$"`
9. **只能输入长度为3的字符**：`"^.{3}$"`
10. **只能输入由26个英文字母组成的字符串**：`"^[A-Za-z]+$"`
11. **只能输入由26个大写英文字母组成的字符串**：`"^[A-Z]+$"`
12. **只能输入由26个小写英文字母组成的字符串**：`"^[a-z]+$"`
13. **只能输入由数字和26个英文字母组成的字符串**：`"^[A-Za-z0-9]+$"`
14. **只能输入由数字、26个英文字母或者下划线组成的字符串**：`"^\w+$"`
#### 六、验证用户密码
对于密码输入框，通常要求以字母开头，长度在6~18之间，且只能包含字符、数字和下划线：
```regex
"^[a-zA-Z]\w{5,17}$"
```
#### 七、验证是否含有特定字符
如果需要验证用户输入的字符串中是否含有某些特殊字符，例如 `^%',;=$\"`，可以使用如下正则表达式：
```regex
"[^%',;=$\\x22]+"
```
#### 八、只允许输入汉字
对于只允许输入汉字的情况，可以使用如下正则表达式：
```regex
"^[\u4e00-\u9fa5]{0,}$"
```
#### 九、其他应用场景
针对一些特殊的输入需求，例如只允许输入数字和小数点，同时防止粘贴操作带来的非法字符问题，可以通过结合 `onkeyup`, `onpaste` 和 `oncontextmenu` 事件实现：
```html
<input type="text" onkeyup="value=value.replace(/[^0-9.]/g,''), dxfqlld();" onpaste="value=value.replace(/[^0-9.]/g,'')" oncontextmenu="value=value.replace(/[^0-9.]/g,'')" />
```
这里的 `dxfqlld();` 是一个占位符函数名，实际使用时应替换为你自己的逻辑处理函数。
### 结语
以上介绍的方法可以帮助开发者有效地控制用户在 input 输入框中的输入内容，提高表单数据的有效性和准确性。在实际项目中，可以根据具体需求灵活调整正则表达式的写法，以达到最佳效果。
