继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS 手机号分位添加空格

SuperManSuperWorld
关注TA
已关注
手记 1
粉丝 0
获赞 38

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

<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>
打开App,阅读手记
9人推荐
发表评论
随时随地看视频慕课网APP

热门评论

格式正确用正则截取输出好像程序有错


查看全部评论