一个简单得活动报名页(验证码)

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>

  

以上是关于一个简单得活动报名页(验证码)的主要内容,如果未能解决你的问题,请参考以下文章

简单的验证码识别

在片段活动中显示自定义对话框

超简单的PHP验证码识别

简单的分布页+登录+EF调用存储过程

OnDetach/onAttach 片段重新创建片段活动

一个简单的验证码