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

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个整数结尾。

注意

maxlength 属性只能与 <input type="text"> 或 <input type="password"> 配合使用,不能与type为除此之外的其他类型一同使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值