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" ></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>

輸入6位驗證碼 自動校驗