vue form 滑动验证码、手机短信验证

话不多说直接上效果图

vue 注册首页

校验

滑动验证

 

页面源码

<template>
  <div id="loginWrap">
    <div id="loginArea">
      <!--<el-tooltip class="item" effect="dark" :content="$t('login.change')" placement="bottom-end">-->
      <!--<i class="exChange el-icon-fa-exchange" @click="exChange"></i>-->
      <!--</el-tooltip>-->
      <div class="loginPanel regPanel">
        <h1><img src="../../assets/css/theme1/images/logo.png"/>{{$t('login.title')}}</h1>
        <div class="login">
          <div class="province">
            <h2>注册</h2>
            <!--<lang-select class="set-language"></lang-select>-->
          </div>
          <div class="form-group">
            <el-form  class="loginFrom" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >

              <!--登录名-->
              <el-form-item prop="userName" label-width="0px">
                <i class="fa el-icon-fa-user-o"></i>
                <el-input type="text" :placeholder="$t('login.username')" name="userName" v-model.trim="ruleForm.userName" autoComplete="on"  @keyup.enter.native="submitButton" clearable></el-input>
              </el-form-item>
              <!--手机号-->
              <el-form-item prop="tel" label-width="0px">
                <i class="fa el-icon-fa-mobile-phone"></i>
                <el-input type="tel"  :placeholder="$t('login.tel')" name="tel" v-model.trim="ruleForm.tel" autoComplete="on"  @keyup.enter.native="submitButton" clearable></el-input>
              </el-form-item>
              <!--验证码-->
              <el-row :gutter="10">
                <el-col :span="17">
                  <el-form-item prop="smscode" label-width="0px">
                    <i class="fa el-icon-fa-envelope-o"></i>
                    <el-input    type="smscode" ref="smscode" :placeholder="$t('login.smscode')" name="smscode" v-model.trim="ruleForm.smscode" autoComplete="on"  @keyup.enter.native="submitButton" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <!--发送验证码-->
                  <el-button class="loginBtn codeBtn" type="primary" :disabled='isDisabled' @click="sendCode">{{buttonText}}</el-button>
                </el-col>
              </el-row>
              <!--公司名称-->
              <el-form-item prop="companyname" label-width="0px">
                <i class="fa el-icon-fa-home"></i>
                <el-input type="text" ref="pass" :placeholder="$t('login.companyname')" name="companyname" v-model="ruleForm.companyname" autoComplete="on" clearable></el-input>
              </el-form-item>
              <!--联系人-->
              <el-form-item prop="contactperson" label-width="0px">
                <i class="fa el-icon-fa-address-book-o"></i>
                <el-input type="contactperson" ref="pass" :placeholder="$t('login.contactperson')" name="contactperson" v-model="ruleForm.contactperson" autoComplete="on" clearable></el-input>
              </el-form-item>
              <!--Emaill-->
              <el-form-item prop="email" label-width="0px">
                <i class="fa el-icon-fa-envelope"></i>
                <el-input type="email" ref="pass" :placeholder="$t('login.email')" name="email" v-model="ruleForm.email" autoComplete="on"  clearable></el-input>
              </el-form-item>
              <!--密码-->
              <el-form-item prop="password" label-width="0px">
                <i class="fa el-icon-fa-lock"></i>
                <el-input type="password" ref="pass" :placeholder="$t('login.password')" name="password" v-model.trim="ruleForm.password" autoComplete="on"  @keyup.enter.native="submitButton" clearable></el-input>
              </el-form-item>
              <!--确认密码-->
              <el-form-item prop="checkpassword" label-width="0px">
                <i class="fa el-icon-fa-lock"></i>
                <el-input type="password" ref="pass" :placeholder="$t('login.checkpassword')" name="checkpassword" v-model.trim="ruleForm.checkpassword" autoComplete="on"  @keyup.enter.native="submitButton" clearable></el-input>
              </el-form-item>
              <el-button class="loginBtn" type="primary" :loading="logining" v-popover:popover  @click="submitButton" >{{$t('login.submit')}}</el-button>

              <el-form-item label-width="0px" class="serverSel" v-if="serverVis">
                <i class="fa el-icon-fa-database"></i>
                <el-select v-model="server" popper-class="serverSelList" filterable placeholder="跳转至分服务器" @change="handlerServer">
                  <el-option  v-for="item in serverOptions"  :key="item.value"  :label="item.label"  :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <!--验证码弹窗-->
          <el-popover  popper-class="slidingPictures"  ref="popover"  trigger="manual" v-model="visible"  >
            <div class="sliding-pictures">
              <div class="vimg">
                <canvas id="sliderBlock"></canvas>
                <canvas id="codeImg"></canvas>
              </div>
              <div class="slider">
                <div class="track" :class="{pintuTrue: puzzle }">
                  {{ tips }}
                </div>
                <div class="button el-icon-s-grid" @mousedown.prevent="drag"></div>
              </div>
              <div class="operation">
                <span title="关闭验证码"  @click="visible = false"   class="el-icon-circle-close" ></span>
                <span title="刷新验证码"  @click="canvasInit"  class="el-icon-refresh-left" ></span>
              </div>
            </div>
          </el-popover>
          <div class="tips">
            <span style="cursor: pointer;" @click="toLogin()">已有账号,返回登录</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

 

点击确认调用方法

<el-button class="loginBtn" type="primary" :loading="logining" v-popover:popover  @click="submitButton" >{{$t('login.submit')}}</el-button>

确认按钮方法

// 确认按钮
submitButton () {
  this.$refs['ruleForm'].validate(valid => {
    if (valid) {
      this.visible = true
      this.puzzle = false
      this.tips = '拖动左边滑块完成上方拼图'
    }
  })
},

全部源码下载链接

https://download.csdn.net/download/she8656837/11988753