一个简单得活动报名页（验证码）
Posted 粉色年华
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个简单得活动报名页（验证码）相关的知识，希望对你有一定的参考价值。
css:
*{
padding: 0;
margin: 0;
list-style: none;
}
input::-webkit-input-placeholder{
color:#999;
}
input::-moz-placeholder{
color:#999;
}
input:-moz-placeholder{
color:#999;
}
input:-ms-input-placeholder{
color:#999;
}
html{
margin:0 auto;
}
html, body {
font-family: PingFangSC-Medium, "microsoft sans serif", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
max-width: 1024px
}
.section {
width: calc(100% - 30px);
margin-left: 15px;
position: relative;
}
.banner{
height: auto;
margin:15px auto auto;
float: left;
}
.banner .img{
width: 100%;
background: url("/static/images/background.jpg");
background-size: contain;
border-radius: 12px;
}
.banner .logo{
position: absolute;
width: 40%;
height: auto;
left:10px;
top:25px;
z-index: 999;
}
.des{
width: 100%;
float: left;
text-align: center;
margin: 33px auto;
}
.des h2{
font-size: 20px;
margin-bottom: 13px;
}
.des p{
font-size: 12px;
color: rgba(0,0,0,0.50);
}
.form-box{
width: 100%;
height: auto;
float: left;
text-align: center;
}
.form-box .form-cont{
width: 100%;
background: #F5F5FA;
border-radius: 12px;
padding-top: 20px;
padding-bottom: 20px;
}
.form-item {
background: none;
margin: 30px auto;
}
.form-item input{
width: 80%;
background: none;
border: none;
outline: none;
font-size: 16px;
}
.form-item .submit{
width: 240px;
height: 36px;
background-image: linear-gradient(-90deg, #1DB4F7 0%, #6589DD 100%);
border-radius: 36px;
color: #fff;
}
#trigger1{
text-align: left;
width: 80%;
margin: 0 auto;
font-size: 16px
}
#trigger1 input{
width：100%;
}
/* 获取验证码*/
.get-code {
width: 30%;
display: inline-block;
height: 36px;
line-height: 36px;
text-align: center;
background-color: #999;
color: #fff;
font-size: 14px;
border-radius:3px;
}
.get-code.active{
background-color: #6589dd;
}
#code{
margin: 15px 0;
}
#code input{
width: 50%;
}
html:
<div class="section">
<div class="banner">
<img class="logo" src="/static/images/Logo-white.svg" >
<img class="img" src="/static/images/background.jpg" >
</div>
<div class="des">
<h2><span>8.9芝大金融专场(测试活动)</span></h2>
<p><span>清华</span></p>
</div>
<div class="form-box">
<form id="app" @submit="checkForm" method="post" action="/activity/signup">
<div class="form-cont">
<div v-if="errors.length">
<ul>
<!--<li v-for="error in errors">{{ error }}</li>-->
<li v-cloak style="color:rgba(217,98,98,1)">{{errors}}</li>
</ul>
</div>
<div class="form-item">
<span style="color:rgba(217,98,98,1)">*</span><input type="text" name="name" placeholder="请输入姓名" id="name" v-model="name">
</div>
<div class="form-item">
<span style="color:rgba(217,98,98,1)">*</span> <input type="text" name="weChat" placeholder="请输入微信" id="weChat" v-model="weChat">
</div>
<div class="form-item">
<span style="color:rgba(217,98,98,1)">*</span><input type="text" name="univer" placeholder="请输入学校名称" id="univer" v-model="univer">
</div>
<div class="form-item">
<div id="trigger1">
<span style="color:rgba(217,98,98,1)">*</span><input type="text" placeholder="请选择年级" disabled>
</div>
<input type="hidden" name="inSchoolYearLevel" placeholder="请输入年级" v-model="inSchoolYearLevel">
</div>
<div class="form-item">
<input type="text" name="faculty" placeholder="请输入院系" id="faculty" v-model="faculty">
</div>
<div class="form-item">
<span style="color:rgba(217,98,98,1)">*</span> <input type="text" name="phone" placeholder="请输入手机号" id="phone" v-model="phone">
</div>
<div class="form-item" id="code">
<span style="color:rgba(217,98,98,1)">*</span>
<input type="text" name="code" placeholder="请输入验证码" v-model="code">
<div :class="codeClass" @click="getCode($event)">{{ codeContent }}</div>
</div>
<input type="hidden" id="source" name="source" v-model="source">
<div class="form-item">
<input type="hidden" id="activityId" name="activityId" v-model="activityId">
<input type="submit" class="submit" value="报名">
</div>
</div>
</form>
</div>
</div>
js：
<script>
var id = ‘7‘;
var source = ‘‘;
var errMsg = ‘‘;
var weekdayArr=[‘大一‘,‘大二‘,‘大三‘,‘大四‘,‘研一‘,‘研二‘,‘研三‘,‘其他‘];
var intervalName = ‘‘;
var num = 60;
var expPhone = /^1\d{10}$/;
var app = new Vue({
el: ‘#app‘,
data: {
errors: ‘‘,
name: ‘‘,
phone:‘‘,
weChat:‘‘,
univer:‘‘,
faculty:‘‘,
inSchoolYearLevel:‘‘,
source:‘‘,
activityId:‘‘,
num: 60,
code:‘‘,
codeContent:‘获取验证码‘,
codeClass:{
‘get-code‘: true,
active: true,
}
},
created(){
this.source = source;
this.activityId = id;
this.errors = errMsg;
},
methods: {
checkForm: function (e) {
if(this.name==null||this.name==‘‘){
this.errors =‘请输入姓名!‘;
}else if(this.phone==null || this.phone===‘‘){
this.errors =‘请输入手机号!‘;
}else if(!this.code){
this.errors =‘请输入验证码!‘;
}else if(this.weChat==null ||this.weChat===‘‘){
this.errors =‘请输入微信!‘;
}else if(this.univer==null ||this.univer===‘‘){
this.errors =‘请输入大学!‘;
}else if(this.inSchoolYearLevel==null ||this.inSchoolYearLevel==‘‘){
this.errors =‘请输入年级!‘;
}else{
return true;
}
e.preventDefault();
},
getCode (e) {
var the = this;
if( !the.phone ){
alert(‘请填写手机号‘);
return false
}
if(!expPhone.test(the.phone)){
alert(‘手机号格式不正确‘);
return false
}
if(the.codeClass.active){
the.codeClass.active = false;
the.time();
$.ajax({
url:‘/sms/code/‘+the.phone,
type:‘get‘,
success:function (res) {
},
error:function () {
}
})
}
},
time () {
var the = this;
intervalName = setInterval(function(){
if(num === 0){
the.codeContent = ‘重新获取‘;
the.codeClass.active = true;
num = 60;
clearInterval(intervalName)
}else{
num--;
the.codeContent = num+‘ s‘;
}
},1000)
}
}
})
var mobileSelect1 = new MobileSelect({
trigger: ‘#trigger1‘,
title: ‘年级‘,
wheels: [
{data: weekdayArr}
],
transitionEnd:function(indexArr, data){
//console.log(data);
},
callback:function(indexArr, data){
app.$data.inSchoolYearLevel = data[0]
}
});
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?1ff703a5411f08c395cff47eb618ec9c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
以上是关于一个简单得活动报名页（验证码）的主要内容，如果未能解决你的问题，请参考以下文章