HTML 表单input录入内容校验

1 知识点准备

1.1 JavaScript 正则表达式

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

1.2 onkeyup 事件

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

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

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

1.3 onafterpaste 事件

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

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

1.4 isNaN()函数

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

1.5 execCommand()函数

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

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

2 案例

代码如下：

    
    



文本框只能输入数字(小数点也不能输入)






只能输入数字和一个小数点


部分浏览器不支持





只能输入字母和汉字，最多10个字符






只能输入英文字母和数字






只能输入汉字

运行效果：