{extend name="layout:home" /}
{block name="container"}
<style>
    .yanzheng{
        margin:0px auto;
        height: 100px;
        width: 600px;
    }
    ul{
        margin:50px auto;
        width: 536px;
        /*border: 1px red solid;*/
        text-align: center;
        position: relative;
    }

    ul li{
        /*border: 1px #aaa solid;*/
        border-radius: 2px;
        height: 30px;
        width: 30px;
        line-height:30px ;
        float: left;
        margin-left: 220px;
    }
    li .num{
        border: 1px #aaa solid;
        height: 30px;
        width: 30px;
        line-height:30px ;
        text-align: center;
        border-radius: 100%;
        background-color: white;
    }
    li .tishi{
        width: 100px;
        text-align: center;
        /*border: 1px #aaa solid;*/
        margin-left: -35px;
        color: dodgerblue;
    }
    table{
        margin:0 auto;
        font-size: 13px;
    }
    /*.accountinfo_title table{*/
    /*margin-left: 150px;*/
    /*}*/
    table td{
        width: 100px;
        height: 60px;
        line-height: 60px;
    }
    table input{
        border: 1px #aaa solid;
        border-radius: 2px;
        height: 30px;
        width: 220px;
        line-height:30px ;
    }
</style>
<div class="layui-tab layui-tab-card">
    <div class="updatepwd">
        <form method="post">
            <div class="yanzheng">
                <ul>
                    <div style="border: 1px #aaa solid; width: 530px;margin-top: 15px;position: absolute;z-index: -1;" ></div>
                    <li style="margin-left: 0px;">
                        <div class="num">1</div>
                        <div class="tishi">身份验证</div>
                    </li>
                    <li>
                        <div class="num">2</div>
                        <div class="tishi">新电话号码验证</div>
                    </li>
                    <li>
                        <div class="num">3</div>
                        <div class="tishi">下一步</div>
                    </li>
                </ul>
            </div>
            <div style="height: 280px;">
                <table>
                    <tr>
                        <td class="td_info">您的电话号码</td>
                        <td style="position: relative;">+ (86)&nbsp&nbsp{$user['user_phone']}<input type="button" value="获取验证码" style="width: 80px;accept:right;position: absolute;right: 0px;top:15px;"></td>
                    </tr>
                    <tr>
                        <td class="td_info">输入验证码</td>
                        <td class="td_user_info"><input type="text" name="captcha" id="captcha" placeholder="请输入验证码"></td>
                    </tr>
                    <tr>
                        <td class="td_info"></td>
                        <td class="next">
                            <input type="button" value="下一步" style="width: 70px;border-color: dodgerblue;color: dodgerblue;background-color: white;">
                            <input type="button" id="btn" value="取消" style="width: 70px;border-color: dodgerblue;color: dodgerblue;background-color: white;margin-left: 30px;">
                        </td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>
<script>
    $("#btn").click(function(){
        window.history.back(-1);
    });
    //密码 校验
    $("#new_password").blur(function(){
        var password = document.getElementById("new_password").value;
        var patrn=/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
        if (!patrn.exec(password)){
            document.getElementById("new_password").style.borderColor = "red";
            document.getElementById("layui-btn").type = "button";
        }else{
            document.getElementById("new_password").style.borderColor = "#e6e6e6";
            if(document.getElementById("confirm_password").style.borderColor != "red"){
                document.getElementById("layui-btn").type = "submit";
            }
        }
    });
    $("#confirm_password").blur(function(){
        var password = document.getElementById("confirm_password").value;
        var patrn=/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,20}$/;
        if (!patrn.exec(password)){
            document.getElementById("confirm_password").style.borderColor = "red";
            document.getElementById("layui-btn").type = "button";
        }else{
            document.getElementById("confirm_password").style.borderColor = "#e6e6e6";
            if(document.getElementById("new_password").style.borderColor != "red"){
                document.getElementById("layui-btn").type = "submit";
            }
        }
    });
</script>
<script type="text/javascript">
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#creatTime' //指定元素
        });
        laydate.render({
            elem:'#timeRang',
            range:true,
            format: 'yyyy/MM/dd',
            done: function(value, date){
                /* 时间选择完成后的回调 */
            }
        })
    });
</script>
{/block}