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