js input手机号正则限制11位数字

**  h5开发 js代码限制 input 输入框只能输入纯数字**
(1)方案一

javascript 复制代码
onkeyup = "value=value.replace(/[^\d]/g,'')"

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

(2)方案二

javascript 复制代码
onchange = "value=value.replace(/[^\d]/g,'')"

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

(3)方案三

javascript 复制代码
oninput = "value=value.replace(/[^\d]/g,'')"

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

测试

javascript 复制代码
<input type="text" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"  placeholder="请输入您的手机号">

  接着加个maxlength="11" 限制只能输入位数为11位;

  js验证代码

javascript 复制代码
var num = document.getElementById('num');
                if(num.value.length != 18){
                    alert('输入正确的身份证号码');
                    num.focus();
                    return false;
                }
javascript 复制代码
var phone_reg = /^13[0-9]{1}[0-9]{8}$|15[0-9]{1}[0-9]{8}$|18[0-9]{1}[0-9]{8}|17[0-9]{1}[0-9]{8}$|14[0-9]{1}[0-9]{8}/;
                    var tel_reg = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
                    if(!phone_reg.test(phone.value) && !tel_reg.test(phone.value)){
                        alert('手机或电话号码格式不正确。如果是固定电话,必须形如(xxxx-xxxxxxxx)');
                        phone.focus();
                        return false;
                    }
相关推荐
腻害兔7 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:CRM 客户关系模块深度解析——从线索到回款,一套完整的 B2B 销售闭环是怎么搭的?
java·前端·javascript·vue.js·产品经理·ai编程
whyfail7 小时前
前端学 Spring Boot(2):一次点击,如何穿过整个后端?
前端·spring boot·后端
wdfk_prog7 小时前
嵌入式面试真题第 13 题:单硬件 Timer 下的高精度多路软件定时器架构设计
c语言·开发语言·面试·职场和发展·嵌入式
oort1237 小时前
吃上了自家的细糠,还挺丝滑,用起来手感还行,OortCloud发布新版AI编程平台,下载 OortCodex,Token多,免费薅
大数据·开发语言·人工智能·ai编程
slandarer7 小时前
MATLAB | 泰勒图绘制,支持各种角度范围
开发语言·数学建模·matlab·nature·顶刊·泰勒图
AI多Agent协作实战派7 小时前
AI多Agent协作系统实战(二十三):Agent读HEARTBEAT.md不读AGENTS.md——openclaw的文件加载之谜
前端·数据库·人工智能·uni-app
mct1238 小时前
c++ iconv 字符utf-8转换gb2312失败
开发语言·c++
gis开发之家8 小时前
《Vue3 从入门到大神37篇》Vue3 源码详解(七):watch 与 watchEffect 源码对比——副作用是如何被追踪的?
javascript·前端框架·vue3·vue3源码
2601_955760079 小时前
如何用 Claude Opus 5 API 批量扩展长尾关键词和文章选题
前端·python·搜索引擎
KaMeidebaby9 小时前
卡梅德生物技术快报|bli亲和力检测gst:告别批量跑胶:BLI实时酶切监测技术加速GST融合蛋白下游流程优化
前端·网络·数据库·人工智能·算法