为了账号安全,请及时绑定邮箱和手机立即绑定

JS 手机号分位添加空格

菜鸟,自己花了一晚上写的,效果是输入手机时自动添加空格,方便用户确认手机,有什么不对的大家多多指教
写了两个效果,第一个是输入时添加空格,第二个是手机号码合法时用正则截取输出
图片描述

<form action="" id="form">
        <p class="output"></p>
        <input type="text" id="user" name="username" placeholder="请输入11位手机号码" maxlength="13">
    </form>
    <script type="text/javascript">
        var form=document.getElementById('form');
        var input=form.elements[0];
        var output=document.getElementsByClassName('output')[0];
        input.onkeyup=function (e) {
            var value=this.value.replace(/[^\d\s]/g,'');//匹配数字
            this.value=value.replace(/(^\s*)(\s*$)/g,'');//去除前后空格
            var parent=/^(1314151718)([0-9\s]{11})/.test(this.value);
            if (this.value.length == 3 && e.keyCode != 8) { // 8 退格键键码 如果不监控退格键键码,用户输入错误时,按退格键退到第8位时会自动添加空格,会导致不能退格
                this.value=this.value+' ';
            }else if (this.value.length == 8 && e.keyCode !=8) {
                this.value=this.value+' ';
            }else if (parent) {
                output.innerHTML='输入正确';
                output.style.color='green';
            }else if(!parent && this.value.length >= 13){
                output.innerHTML='手机号码格式错误';
                output.style.color='red';
            }else{
                output.innerHTML='';
            }
        }
        input.onblur=function () {
            var value=parseInt(this.value.replace(/\s/g,''));
            alert(typeof value+' '+value);
        }
        //格式正确用正则截取输出
        /*
        input.onkeyup=function () {
            this.value=this.value.replace(/[^\d]/g,'');
            var parent=/^(1314151718)([0-9]{9})$/.test(this.value);
            if (parent) {
                output.innerHTML='输入正确';
                output.style.color='green';
                this.value=this.value.replace(/^(.{3})(.{4})$/g,'$1 $2');
            }else if (this.value.length >=11 && !parent) {
                output.innerHTML='手机号码格式错误';
                output.style.color='red';
            }
        }
        input.onblur=function () {
            var value=parseInt(this.value.replace(/\s/g,''));
            alert(typeof value+' '+value);
        }*/
    </script>
点击查看更多内容
9人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消