输入6位验证码 自动校验

css样式
<style>
            .yxsc_6numYzmFa{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.6);font-size: 0.2rem;z-index: 99;}
            .yxsc_6numYzm{width: 6rem;position: absolute;top: 50%;left: 50%;margin-left: -3rem;margin-top: -1.54rem;background: white;padding: 0.1rem 0 0.2rem;}
            .yxsc_6numYzm_show{
                width: 5.6rem;
                margin: 0 auto;
            }
            .yxsc_6numYzm_show>div{
                width:0.8rem;border: none; height: 0.6rem;font-size: 0.3rem;text-align: center;color: #333;border-bottom:2px solid #666;
                line-height: 0.6rem;}
            .yxsc_6numYzm_show>div:empty{
                border-bottom: 2px solid #aaa;
            }
            .yxsc_6numYzm_closed{float: right;margin: 0.1rem 0.2rem;}
            .yxsc_6numYzm_closed>img{width: 0.4rem;height: 0.4rem;}
            .yxsc_6numYzm_tit{text-align: center;line-height: 0.4rem;font-size: 0.24rem;}
            .yxsc_6numYzm_tit2{text-align: center;line-height: 0.4rem;font-size: 0.26rem;}
            .yxsc_6numYzm_tit3{text-align: center;line-height: 0.4rem;font-size: 0.24rem;margin-top: 0.2rem;}
            .yxsc_6numYzm_tit4{text-align: center;line-height: 0.4rem;font-size: 0.24rem;}
            .yxsc_6numYzm_center{position: relative;}
            .yxsc_6numYzm_hide{position: absolute;top: 0;left: 0.2rem;}
            .yxsc_6numYzm_hide input{color: transparent;height: 0.6rem;line-height: 0.6rem;width: 5.6rem;border: none;background: transparent;outline: transparent;}
            .yxsc_6numYzm_tit4_daojishi{}
            .yxsc_6numYzm_tit4_daojishi .c_blue{color: #0159d5;}
            .yxsc_6numYzm_error{;width: 3.8rem;position: absolute;;top: 50%;left: 50%;margin-left: -1.9rem;margin-top:-0.3rem;z-index: 99;
    height: 0.6rem;line-height: 0.6rem;text-align: center;color: white;background: #d70b30;border-radius: 0.1rem;display: none;}
        </style>
        
        
html结构：
<!-- 6位验证码弹窗 -->
            <div class="yxsc_6numYzmFa yxsc_6numYzmFafn">
                <div class="yxsc_6numYzm ">
                    <div class="clear">
                        <div class="yxsc_6numYzm_closed yxsc_6numYzm_closedfn"><img src="images/close.png" alt=""></div>
                    </div>
                    <div class="yxsc_6numYzm_tit">请输入188****8888收到的短信验证码</div>
                    <div class="yxsc_6numYzm_tit2">以完成订单提交</div>
                    <div class="yxsc_6numYzm_center">
                        <div class="yxsc_6numYzm_show yxsc_6numYzm_showfn all-flex all-justify-justify all-align-items-center">
                            <div></div><div></div><div></div><div></div><div></div><div></div>
                        </div>
                        <div class="yxsc_6numYzm_hide">
                            <input class="yxsc_6numYzm_hide_input yxsc_6numYzm_hide_inputfn" type="tel" value="" maxlength="6">
                        </div>
                    </div>
                    <div class="yxsc_6numYzm_tit3">
                        如原手机号无法接受短信码，请致电400-809-1991
                    </div>
                    <div class="yxsc_6numYzm_tit4">
                        <p class="yxsc_6numYzm_tit4_daojishi yxsc_6numYzm_tit4_daojishifn" style=""><span class="c_blue">60</span>秒后可重新获取验证码</p>
                        <p class="yxsc_6numYzm_tit4_getagin yxsc_6numYzm_tit4_getaginfn" style="display: none;"><a class="c_blue" href="javascript:;">获取验证码</a></p>
                    </div>
                </div>
                
                <div class="yxsc_6numYzm_error"></div>
            </div>
        
        
js方法：
<script>
                $(function(){
                    var yanzheng6_flag=true;
                    // 点击关闭 关闭6位短信码验证窗口
                    $('.yxsc_6numYzm_closedfn').on('click',function(){
                        $('.yxsc_6numYzmFafn').fadeOut(300);
                    })
                    // 输入input改变div的值
                    $('.yxsc_6numYzm_hide_inputfn').on('input propertychange change',function(){
                        if(yanzheng6_flag){
                            var this_input_val=$(this).val();
                            $('.yxsc_6numYzm_showfn div').html('');
                            for(var i=0;i<this_input_val.length;i++){
                                $($('.yxsc_6numYzm_showfn div')[i]).html(this_input_val.charAt(i))
                            }
                            // 如果输入了第六位 就发送ajax验证
                            if(this_input_val.length==6){
                                yanzheng6_flag=false;
                                $('.yxsc_6numYzm_error').html('正在校验，请稍后').fadeIn(300);
                                $.ajax({
                                    url : "test.json",
                                    dataType:"JSON",
                                    type:"GET",
                                    success:function(result){
                                        setTimeout(function(){
                                            // 数据有响应后 打开input的监听
                                            yanzheng6_flag=true;
                                            // 如果成功关闭窗口
                                            // $('.yxsc_6numYzmFafn ').fadeOut(300);
                                            //如果失败 就弹出提示窗口
    //                                         $('.yxsc_6numYzm_error').html('验证码错误，请重新输入').fadeIn(300);
    //                                         setTimeout(function(){
    //                                             $('.yxsc_6numYzm_error').fadeOut(300);
    //                                         },1500);
                                            // 重置数据
                                            $('.yxsc_6numYzm_showfn div').html('');
                                            $('.yxsc_6numYzm_hide_inputfn').val('');
                                            $('.yxsc_6numYzm_error').fadeOut(300);
                                        },3000)
                                    },
                                    error:function () {
                                    }
                                })
                            }
                        }else{
                        }
                    })
                    // 倒计时
                    function getiter() {
                        var num = 60;
                        $(".yxsc_6numYzm_tit4_daojishifn span").html(num);
                        var iter = setInterval(function() {
                            $(".yxsc_6numYzm_tit4_daojishifn span").html(--num);
                            if (num == 0) {
                                clearInterval(iter);
                                num_otf = true;
                                $('.yxsc_6numYzm_tit4_daojishifn').hide();
                                $('.yxsc_6numYzm_tit4_getaginfn').show();
                            }
                        }, 1000)
                    }
                    getiter();
                    var num_otf = true;
                    // 点击重发验证码
                    $('.yxsc_6numYzm_tit4_getaginfn a').on("click", function() {
                        if (num_otf) {
                            num_otf = false;
                            getiter();
                            $('.yxsc_6numYzm_tit4_daojishifn').show();
                            $('.yxsc_6numYzm_tit4_getaginfn').hide();
                        }
                    })
                })
            </script>

 

css样式<style>.yxsc_6numYzmFa{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.6);font-size: 0.2rem;z-index: 99;}.yxsc_6numYzm{width: 6rem;position: absolute;top: 50%;left: 50%;margin-left: -3rem;margin-top: -1.54rem;background: white;padding: 0.1rem 0 0.2rem;}.yxsc_6numYzm_show{width: 5.6rem;margin: 0 auto;}.yxsc_6numYzm_show>div{width:0.8rem;border: none; height: 0.6rem;font-size: 0.3rem;text-align: center;color: #333;border-bottom:2px solid #666;line-height: 0.6rem;}.yxsc_6numYzm_show>div:empty{border-bottom: 2px solid #aaa;}.yxsc_6numYzm_closed{float: right;margin: 0.1rem 0.2rem;}.yxsc_6numYzm_closed>img{width: 0.4rem;height: 0.4rem;}.yxsc_6numYzm_tit{text-align: center;line-height: 0.4rem;font-size: 0.24rem;}.yxsc_6numYzm_tit2{text-align: center;line-height: 0.4rem;font-size: 0.26rem;}.yxsc_6numYzm_tit3{text-align: center;line-height: 0.4rem;font-size: 0.24rem;margin-top: 0.2rem;}.yxsc_6numYzm_tit4{text-align: center;line-height: 0.4rem;font-size: 0.24rem;}.yxsc_6numYzm_center{position: relative;}.yxsc_6numYzm_hide{position: absolute;top: 0;left: 0.2rem;}.yxsc_6numYzm_hide input{color: transparent;height: 0.6rem;line-height: 0.6rem;width: 5.6rem;border: none;background: transparent;outline: transparent;}.yxsc_6numYzm_tit4_daojishi{}.yxsc_6numYzm_tit4_daojishi .c_blue{color: #0159d5;}.yxsc_6numYzm_error{;width: 3.8rem;position: absolute;;top: 50%;left: 50%;margin-left: -1.9rem;margin-top:-0.3rem;z-index: 99;    height: 0.6rem;line-height: 0.6rem;text-align: center;color: white;background: #d70b30;border-radius: 0.1rem;display: none;}</style>html结构：<!-- 6位验证码弹窗 --><div class="yxsc_6numYzmFa yxsc_6numYzmFafn"><div class="yxsc_6numYzm "><div class="clear"><div class="yxsc_6numYzm_closed yxsc_6numYzm_closedfn"><img src="images/close.png" alt=""></div></div><div class="yxsc_6numYzm_tit">请输入188****8888收到的短信验证码</div><div class="yxsc_6numYzm_tit2">以完成订单提交</div><div class="yxsc_6numYzm_center"><div class="yxsc_6numYzm_show yxsc_6numYzm_showfn all-flex all-justify-justify all-align-items-center"><div></div><div></div><div></div><div></div><div></div><div></div></div><div class="yxsc_6numYzm_hide"><input class="yxsc_6numYzm_hide_input yxsc_6numYzm_hide_inputfn" type="tel" value="" maxlength="6"></div></div><div class="yxsc_6numYzm_tit3">如原手机号无法接受短信码，请致电400-809-1991</div><div class="yxsc_6numYzm_tit4"><p class="yxsc_6numYzm_tit4_daojishi yxsc_6numYzm_tit4_daojishifn" style=""><span class="c_blue">60</span>秒后可重新获取验证码</p><p class="yxsc_6numYzm_tit4_getagin yxsc_6numYzm_tit4_getaginfn" style="display: none;"><a class="c_blue" href="javascript:;">获取验证码</a></p></div></div><div class="yxsc_6numYzm_error"></div></div>js方法：<script>$(function(){var yanzheng6_flag=true;// 点击关闭 关闭6位短信码验证窗口$('.yxsc_6numYzm_closedfn').on('click',function(){$('.yxsc_6numYzmFafn').fadeOut(300);})// 输入input改变div的值$('.yxsc_6numYzm_hide_inputfn').on('input propertychange change',function(){if(yanzheng6_flag){var this_input_val=$(this).val();$('.yxsc_6numYzm_showfn div').html('');for(var i=0;i<this_input_val.length;i++){$($('.yxsc_6numYzm_showfn div')[i]).html(this_input_val.charAt(i))}// 如果输入了第六位 就发送ajax验证if(this_input_val.length==6){yanzheng6_flag=false;$('.yxsc_6numYzm_error').html('正在校验，请稍后').fadeIn(300);$.ajax({url : "test.json",dataType:"JSON",type:"GET",success:function(result){setTimeout(function(){// 数据有响应后 打开input的监听yanzheng6_flag=true;// 如果成功关闭窗口// $('.yxsc_6numYzmFafn ').fadeOut(300);//如果失败 就弹出提示窗口// $('.yxsc_6numYzm_error').html('验证码错误，请重新输入').fadeIn(300);// setTimeout(function(){// $('.yxsc_6numYzm_error').fadeOut(300);// },1500);// 重置数据$('.yxsc_6numYzm_showfn div').html('');$('.yxsc_6numYzm_hide_inputfn').val('');$('.yxsc_6numYzm_error').fadeOut(300);},3000)},error:function () {}})}}else{}})// 倒计时function getiter() {    var num = 60;    $(".yxsc_6numYzm_tit4_daojishifn span").html(num);    var iter = setInterval(function() {        $(".yxsc_6numYzm_tit4_daojishifn span").html(--num);        if (num == 0) {            clearInterval(iter);            num_otf = true;            $('.yxsc_6numYzm_tit4_daojishifn').hide();            $('.yxsc_6numYzm_tit4_getaginfn').show();        }    }, 1000)}getiter();var num_otf = true;// 点击重发验证码$('.yxsc_6numYzm_tit4_getaginfn a').on("click", function() {    if (num_otf) {        num_otf = false;        getiter();        $('.yxsc_6numYzm_tit4_daojishifn').show();        $('.yxsc_6numYzm_tit4_getaginfn').hide();    }})})</script>