HTML 表单input录入内容校验

最新推荐文章于 2025-05-17 13:45:53 发布

梦因you而美

最新推荐文章于 2025-05-17 13:45:53 发布

阅读量6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML前端文章标签： js HTML input录入内容校验 input js事件

本文链接：https://blog.youkuaiyun.com/apollo_miracle/article/details/107208187

HTML前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍JavaScript中限制输入字段的方法，包括使用正则表达式、onkeyup事件、onafterpaste事件等，实现数字、字母、汉字的输入限制及特殊字符过滤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 知识点准备

1.1 JavaScript 正则表达式

JavaScript 正则表达式：https://www.runoob.com/js/js-regexp.html

1.2 onkeyup 事件

onkeyup 事件会在键盘按键被松开时发生，当用户释放键盘按钮时执行Javascript代码：

<input type="text" onkeyup="myFunction()">

提示：与onkeyup 事件相关的事件发生次序：

onkeydown   键盘按键被按下时发生
onkeypress   键盘按键被按住时发生
onkeyup      键盘按键被松开时发生
onblur   事件会在对象失去焦点时发生

1.3 onafterpaste 事件

onafterpaste 事件会在粘贴后发生，当用户粘贴后执行Javascript代码：

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

提示：一般与onkeyup 事件一起使用用于校验用户输入

1.4 isNaN()函数

isNaN() 函数用于检查其参数是否是非数字值。如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false。

1.5 execCommand()函数

document.execCommand(sCommand[,交互方式, 动态参数])

其中：sCommand为指令参数（如“undo”），交互方式参数如果是true的话将显示对话框，如果为false的话，则不显示对话框，动态参数一般为可用值或属性值。

2 案例

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>INPUT</title>
</head>
<body>

<p>文本框只能输入数字(小数点也不能输入)</p>
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"><br>

<br>

<p>只能输入数字和一个小数点</p>
<input onchange="if (!(/^\d+.?\d*$/.test(this.value))){alert('只能输入数字');this.value='';}"><br>
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"><span>部分浏览器不支持</span><br>

<br>

<p>只能输入字母和汉字，最多10个字符</p>
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5a-zA-Z]/g,'') "
       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[/d]/g,''))" maxlength=10><br>

<br>

<p>只能输入英文字母和数字</p>
<input onkeyup="value=value.replace(/[^\da-zA-Z]/ig,'')"><br>

<br>

<p>只能输入汉字</p>
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^/u4E00-/u9FA5]/g,''))"><br>


</body>
</html>

运行效果：