tp6 短信验证码表单提现

最新推荐文章于 2022-06-15 22:24:23 发布

jweicao

最新推荐文章于 2022-06-15 22:24:23 发布

阅读量136

点赞数

文章标签： html

本文链接：https://blog.csdn.net/jweicao/article/details/117628599

版权

本文主要探讨了在ThinkPHP6（TP6）框架中实现短信验证码功能，并结合HTML和CSS进行表单设计和验证的过程。首先，介绍了如何在项目中引入CSS样式，然后详细阐述了在用户角色验证中短信验证码的重要性，以及如何在表单提交中应用验证码进行提现操作的安全控制。

摘要由CSDN通过智能技术生成

<div class="box">
    <div class="top">
        <p>当前账户余额 <span class="text"> ¥{$data['total_price']}</span></p>
        <p>冻结余额 <span class="text">¥{$data['freeze']}</span></p>
        <p>可提现余额 <span class="text">¥{$data['price']}</span></p>
        <p>提现银行名称 <span class="text">{$data['bank_name']}</span></p>
        <p>提现银行账户 <span class="text">{$data['bank_sn']}</span></p>
    </div>
    <div class="form">
        <form action="save" method="post" id="commentForm">
            <div class="item">
                <div class="title">提现金额:</div>
                <div class="input"><input type="text" id="price" name="price" placeholder="请填写提现金额"></div>
                <input type="hidden" name="id" id="id" value="1">
            </div>

            <div class="item">
                <div class="title">图形验证码:</div>
                <div class="input"><input type="text" id="img_code" name="captcha" placeholder="图形验证码">
                    <span class="img">
                    <img src="{:captcha_src()}" onclick="this.src ='{:captcha_src()}'+ '?v=' + Math.random()" alt=""
                         width="100px" height="30px">
                </span>
                    <span id="captcha">看不清楚 ? 换一张</span>
                </div>
            </div>
            <div class="item">
                <div class="title">短信验证码:</div>
                <div class="input"><input type="text" name="phone_code" placeholder="短信验证码">
                    <span class="btn" id="btn">发送验证码</span></div>
            </div>
            <div class="item">
                <div class="input"><span class="btn submit">提交申请</span></div>
            </div>
        </form>
    </div>
    <div class="list" >
        <div style="font-weight: bold"> 提现记录</div>
        <table class="table">
            <tr>
                <th>提现时间</th>
                <th>提现金额</th>
                <th>状态</th>
                <th>备注</th>
            </tr>
            {foreach $list as $v}
            <tr>
                <td>{$v['time']}</td>
                <td><span class="text">¥{$v['price']}</span></td>
                <td>{$v['status']}</td>
                <td>{$v['desc']}</td>
            </tr>
            {/foreach}
        </table>
        {$page|raw}
    </div>

</div>

css

<style>
        .box {width: 80%;margin: 50px auto;}
        .top {
            width: 100%;
            background-color: #fdfaee;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        p {margin-left: 10px;}
        .text {
            color: #f98b2d;
        }
        .item {
            width: 100%;
            line-height: 50px;
            display: flex;
        }
        .title {width: 15%;}
        input {margin-left: 10px;height: 30px;}
        .btn {
            text-align: center;
            margin-left: 10px;
            padding: 0 5px;
            background-color: #f98b2d;
            border-radius: 5px;
            color: white;
        }
        .img {
            width: 100px;
            margin-top: 5px;
            line-height: 30px;
            border-radius: 5px;
        }
        .list {margin-top: 20px;}
        .table {text-align: center }
        .table th{text-align: center;}

    </style>

引入

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .box {width: 80%;margin: 50px auto;}
        .top {
            width: 100%;
            background-color: #fdfaee;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        p {margin-left: 10px;}
        .text {
            color: #f98b2d;
        }
        .item {
            width: 100%;
            line-height: 50px;
            display: flex;
        }
        .title {width: 15%;}
        input {margin-left: 10px;height: 30px;}
        .btn {
            text-align: center;
            margin-left: 10px;
            padding: 0 5px;
            background-color: #f98b2d;
            border-radius: 5px;
            color: white;
        }
        .img {
            width: 100px;
            margin-top: 5px;
            line-height: 30px;
            border-radius: 5px;
        }
        .list {margin-top: 20px;}
        .table {text-align: center }
        .table th{text-align: center;}

    </style>

角色

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<script>
    $(function () {
        $('#captcha').click(function () {
            $('img').attr('src', '{:captcha_src()}' + '?v=' + Math.random())
        });

        $('#btn').click(function () {
            var captcha = $('#img_code').val();
            var phone = 13673417827;
            if (captcha == '') {
                alert('请输入图片验证码');
                return false;
            }
            $.ajax({
                url: 'http://www.tp6.com/week/bankbind/code',
                data: {captcha, phone},
                dataType: 'json',
                success:res=>{
                    console.log(res);
                    if (res.code == 200) {
                        alert('验证码已发送 请注意查收');
                        var time = 60
                        var timers = setInterval(function () {
                            time--;
                            if (time > 0) {
                                $('#btn').html(time + "秒");
                                $('#btn').prop("disabled", true)
                            } else {
                                $('#btn').html("发送验证码");
                                $('#btn').prop("disabled", false)
                                clearInterval(timers)
                            }
                        }, 1000)
                    } else {
                        alert(res.msg);
                    }
                }
            });
        })

        $('#price').blur(function(){
            var id = $('#id').val();
             var price = $(this).val();
            $.get('price',{id,price}).then(res=>{
                if (res.code == 200){
                    alert(res.msg);
                }
            })
        })
        $("#commentForm").validate({
            rules: {
                price: {
                    required: true,
                    number: true
                },
                captcha: {
                    required: true,
                    minlength: 4,
                },
                phone_code: {
                    required: true,
                    minlength: 4,
                    number: true
                },
            },
            submitHandler: function (form) {
                // 表单提交地址
                let url = $(form).attr('action');
                // 表单序列化   _token=aaa&name=fewflew
                let data = $(form).serialize();
                // jquery post提交
                $.post(url,data).then(res=>{
                    console.log(res);
                    if( res.code== 200){
                        alert(res.msg);
                        location.reload();
                    }else{
                        alert(res.msg);
                    }
                })
                return false;
            }
        });
    })


</script>