前台效果
第一步
第二步
第三步：提交
html 代码
<div class="formDiv">
<form action="" method="post" name="myform" id="myform">
{$form}
<!--第一步-->
<ul>
<li class="formDiv_li">
<div class="form-row">
<div class="form-group col-md-6">
<label for="dr_name"><i>*</i> 姓名</label>
<input type="text" name="data[title]" class="form-control" id="dr_name">
</div>
<div class="form-group col-md-6">
<label for="dr_danwei"><i>*</i> 单位</label>
<input type="text" name="data[danwei]" class="form-control" id="dr_danwei">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label for="dr_zjlx">证件类型</label>
<select id="dr_zjlx" name="data[zjlx]" class="form-control">
<option selected disabled>请选择</option>
<option value="1">身份证</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="dr_zjhm">证件号码</label>
<input type="text" name="data[zjhm]" class="form-control" id="dr_zjhm">
</div>
{php $user=dr_member_info($member.uid);}
<div class="form-group col-md-6">
<label for="dr_danwei"><i>*</i> 联系电话</label>
<input type="text" name="data[lxdh]" class="form-control" id="dr_lxdh" value="{$user.phone}">
</div>
</div>
<button type="button" class="btn btn-primary btn-form-a" style="width: 100%;">下一步</button>
</li>
<!--第二步注意事项-->
<li class="formDiv_li">
<div class="formDiv_info">
<div class="formDiv_info_title">注意事项</div>
<div class="formDiv_info_ms">
<p class="MsoNormal">
<b>一、服务协议的确定</b><b> </b>
</p>
<p class="MsoNormal" style="text-indent:21.0pt;">
中国铁合金现货网站（<span>www.thjb.net</span>），由河南德艺电子商务有限责任公司开发、建设、运营、管理，根据相关法律、法规进行网上购买中国铁合金现货网的产品和各种增值服务业务。<span></span>
</p>
<p class="MsoNormal" style="text-indent:21.0pt;">
依照本协议以下条款本网登记注册的会员（以下简称<span>“</span>用户<span>”</span>），并同意以下服务条款，方有资格享受中国铁合金现货网提供的相应服务，并受本协议条款的约束。<span> </span>
</p>
<p class="MsoNormal">
<b>二、内容所有权</b><b></b>
</p>
<p class="MsoNormal">
<span>
1</span>．中国铁合金现货网提供的网络服务内容可能包括：文字、软件、声音、图片、录象、图表等。所有这些内容受版权、商标和其它财产所有权法律的保护。<span> </span>
</p>
<p class="MsoNormal" style="text-indent:21.0pt;">
<span>2</span>．用户只有在获得中国铁合金现货网或其他相关权利人的授权之后才能使用这些内容，而不能擅自复制、再造这些内容、或创造与内容有关的派生产品。<span> </span>
</p>
<p class="MsoNormal">
<b>三、用户信息的提供</b><b></b>
</p>
<p class="MsoNormal" style="text-indent:21.0pt;">
为保障用户的合法权益，避免在服务时因用户注册资料与真实情况不符而发生纠纷，请用户注册时务必按照真实、全面、准确的原则填写。对因用户自身原因而造成的不能服务情况，中国铁合金现货网概不负责。如果用户提供的资料包含有不正确的信息，本网保留结束该用户使用服务资格的权利。<span></span>
</p>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
同意协议
</label>
</div>
</div>
<button type="button" class="btn btn-primary btn-form-b" style=" width: 100%;">下一步</button>
</li>
<!--第三步-->
<li class="formDiv_li">
<div class="formDiv_info_title">立案一次性告知书</div>
<div class="formDiv_li_file">
<div class="form-row">
<div class="form-group col-md-12">
<label>下载相关附件：</label>
<a class="btn btn-primary" href="{dr_block('laycxgzs')}" target="_blank">下载告知书</a>
<input type="hidden" id="dr_customFile" name="data[shangchuan]" value="">
</div>
<div class="form-group col-md-12 fileButtonStyle">
<div class="custom-file" id="fileButton">
<input type="hidden" class="custom-file-input" name="data[zjcl]" id="customFile">
<label class="custom-file-label fileLabel" for="customFile"></label>
</div>
</div>
</div>
</div>
<button type="button" onclick="" class="btn btn-primary btn-form-submit" style=" width: 100%;">提交</button>
</li>
</ul>
</form>
</div>css
/*form*/
.formDiv{ padding: 0 10%;}
.formDiv .formDiv_li{ width: 100%; padding: 30px 0; display: none;}
.formDiv .formDiv_li label{ font-size: 16px; margin-bottom: 5px;}
.form-group{ margin-bottom: 30px;}
.formDiv_info{ width: 100%; padding: 30px 20px;}
.formDiv_info_title{ font-size: 20px; line-height: 24px; font-weight: bold; width: 100%; text-align: center;}
.formDiv_info_ms{ padding: 15px 0; font-size: 14px; line-height: 24px; margin-top: 30px;}
.btn-right{ float: right;}
.formDiv ul li:nth-child(1){ display: block;}
.formDiv .formDiv_li:nth-child(1){ display: block; !important;}
.formDiv_li_file{ padding: 50px 0;}
.formDiv .formDiv_li .custom-file-input:lang(en)~.custom-file-label::after {
content: "上传证据材料";
}
.fileButtonStyle .layui-upload-file{ display: none;}js
<script>
$(function () {
<!--第一步验证-->
$('.btn-form-a').click(function (){
if (!$('#dr_name').val()){
layer.msg('姓名不能为空!');
return false;
}
if (!$('#dr_danwei').val()){
layer.msg('单位不能为空!');
return false;
}
if (!$('#dr_zjlx').val()){
layer.msg('请选择证件类型!');
return false;
}
if (!$('#dr_zjhm').val()){
layer.msg('请填写证件号码!');
return false;
}
if (!$('#dr_lxdh').val()){
layer.msg('请填写联系电话!');
return false;
}
/*下一步*/
$(this).parent('li').eq(0).hide().siblings().eq(0).show();
});
<!--第二步验证-->
$('.btn-form-b').click(function (){
if (!$('#gridCheck').is(':checked')){
layer.msg('请勾选协议后进，再行下一步!');
return false;
}
/*下一步*/
$(this).parent('li').eq(0).hide().siblings().eq(1).show();
});
<!--第三步验证/提交-->
var time = 0;
$('.btn-form-submit').on('click',function () {
if (!$('#customFile').val()){
layer.msg('请上传证据材料！');
return false;
}else{
/*提交 验证通过后 onclick 添加提交链接*/
$(this).attr('onclick',"dr_ajax_submit('{$post_url}', 'myform', '2000', '{$rt_url}')");
//判断计时器是否处于关闭状态
if (time == 0) {
time = 1;
//设定间隔时间（秒）
// 启动计时器，倒计时time秒后自动关闭计时器。
var index = setInterval(function(){
time--;
if (time == 0) {
clearInterval(index);
}
}, 1000);
$('.btn-form-submit').click();
}
}
});
});
</script>