html的input表单限制纯数字及字符长度

最新推荐文章于 2022-09-23 14:25:09 发布

原创最新推荐文章于 2022-09-23 14:25:09 发布 · 2w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#表单

表单专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用maxlength属性及正则表达式限制HTML输入框的字符长度与确保输入内容仅为数字，包括不同事件处理函数的优缺点及代码示例。

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

1、限制字符长度用maxlength属性

2、限制input输入框为纯数字：

a、onkeyup = "value=value.replace(/[^\d]/g,'')"

使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母

b、onchange = "value=value.replace(/[^\d]/g,'')"

使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应

c、oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件，完美的解决了以上两种问题，测试暂时还没有出现其它问题。

代码示例：（11位手机号码和4位验证码）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>input</title>
</head>
<body>
    <input type="text" placeholder="请输入您的手机号" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11">
    <input type="text" placeholder="请输入您的验证码" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="4">
</body>
</html>

正则验证11位手机号

function isPoneAvailable($poneInput) {  
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
      if (!myreg.test($poneInput.val())) {  
         return false;  
      } else {  
         return true;  
      }  
}

正则表达式：var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;

1--以1为开头；

2--第二位可为3,4,5,6,7,8,9中的任意一位；

3--最后以0-9的9个整数结尾。