很全的PC端手機端適配！一個專案多個域名我試了代理跨域本地執行可以打包上傳不行，然後就用全地址，後端哪裡要設定域名白名單！直接上圖和完整程式碼！覺得可以就點個贊吧，謝謝！

程式碼：

<template>
  <div>
    <div class="register_box" v-for="img in imageList" :key="img" v-lazy:background-image="img">
      <div class="icon1" onClick="window.location.href='/'">
        <img src="../assets/img/register/Rectangle [email protected]" alt="+element實現手機號驗證碼註冊的示例" />
        <span>51大師兄</span><br />
        <span class="left_bottom">企業智囊團&nbsp;&nbsp;專家大舞臺</span>
      </div>
      <div class="register_box_right">
        <div class="content">
          <el-main>
            <el-form
              :model="ReginForm"
              ref="ReginForm"
              :rules="rule"
              class="regform"
              label-width="0"
            >
              <div class="content_text">新使用者註冊</div>
              <div class="inputs">
                <img
                  class="input_phone"
                  src="../assets/img/register/[email protected]"
                  alt="vue+element實現手機號驗證碼註冊的示例"
                />
                <el-form-item prop="tel" class="input">
                  <el-input
                    type="text"
                    v-model.number="ReginForm.tel"
                    placeholder="手機號碼"
                  >
                  </el-input>
                </el-form-item>
              </div>
              <div class="inputs input3">
                <svg
                  t="1643023451870"
                  class="icon icon2"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2576"
                >
                  <path
                    d="M225.5104 252.72832v-110.5408a30.30016 30.30016 0 0 1 30.21312-30.21312h561.98656a30.30528 30.30528 0 0 1 30.21824 30.21312v110.55104h56.3712V115.65568c0-33.23392-27.20256-60.43136-60.44672-60.43136H229.5808c-33.24416 0-60.43136 27.19744-60.43136 60.43136v137.07776h56.36096v-0.00512z m622.41792 484.21376v120.38144a30.3104 30.3104 0 0 1-30.21824 30.208H255.72352a30.30528 30.30528 0 0 1-30.21312-30.208v-120.38144H169.14944v146.91328c0 33.23392 27.19744 60.43648 60.43136 60.43648h614.272c33.23904 0 60.44672-27.19744 60.44672-60.43648v-146.91328h-56.3712zM300.47232 647.34208H243.1744V431.3344c-20.9408 19.55328-45.60896 34.02752-74.02496 43.43808V422.7584c14.9504-4.88448 31.19104-14.1824 48.73728-27.83744 17.54112-13.66528 29.568-29.60384 36.09088-47.81568h46.4896v300.2368z m319.86688-53.24288v53.25312H419.456c2.19136-20.14208 8.71424-39.20896 19.58912-57.20576 10.86464-18.0736 32.34304-41.92768 64.4352-71.7312 25.84576-24.05888 41.6512-40.38144 47.52896-48.9472 7.87456-11.81696 11.82208-23.51616 11.82208-35.08224 0-12.75904-3.44064-22.59456-10.30144-29.46048-6.8864-6.85056-16.31744-10.2912-28.43648-10.2912-11.95008 0-21.48864 3.59936-28.55936 10.78784-7.07072 7.21408-11.15648 19.17952-12.2368 35.90656L426.1888 435.6352c3.40992-31.53408 14.08-54.18496 32.01024-67.90144 17.9456-13.7472 40.38144-20.60288 67.31264-20.60288 29.50144 0 52.66944 7.936 69.5552 23.8592 16.85504 15.90272 25.28256 35.6864 25.28256 59.3408a103.40352 103.40352 0 0 1-7.25504 38.43072c-4.84352 12.17024-12.4672 24.92928-22.94784 38.25664-6.92736 8.83712-19.43552 21.53984-37.51424 38.16448-18.05824 16.55296-29.51168 27.61728-34.34496 33.01888a98.74432 98.74432 0 0 0-11.72992 15.91808h113.78176v-0.02048z m85.33504-26.09664l55.46496-6.72768c1.77664 14.14144 6.528 24.95488 14.24896 32.4096 7.77728 7.46496 17.152 11.20768 28.16 11.20768 11.83232 0 21.7856-4.50048 29.85984-13.42976 8.10496-8.99072 12.15488-21.0944 12.15488-36.31104 0-14.42304-3.88608-25.83552-11.6224-34.25792-7.75168-8.45824-17.2032-12.68224-28.34432-12.68224-7.35232 0-16.10752 1.41824-26.32192 4.28544l6.3232-46.69952c15.50336 0.40448 27.30496-2.96448 35.47648-10.09664 8.14592-7.13728 12.2368-16.60416 12.2368-28.45184 0-10.04544-2.99008-18.08896-8.93952-24.064-6.02112-5.98016-13.9776-8.96512-23.8848-8.96512-9.78432 0-18.16576 3.38432-25.09824 10.19392-6.90688 6.77888-11.11552 16.7168-12.63104 29.76256l-52.8128-8.96c3.67104-18.06336 9.22624-32.54272 16.62464-43.3664 7.424-10.78272 17.73568-19.28704 31.0016-25.46688 13.2608-6.18496 28.10368-9.27744 44.55424-9.27744 28.14464 0 50.688 8.97536 67.712 26.9312 13.9776 14.6688 20.99712 31.26272 20.99712 49.7408 0 26.24512-14.34624 47.1808-43.02848 62.81216 17.12128 3.67616 30.83264 11.91424 41.09824 24.69888 10.2656 12.77952 15.40096 28.20608 15.40096 46.27456 0 26.26048-9.59488 48.62464-28.75392 67.0976-19.16928 18.49856-43.02336 27.74528-71.58272 27.74528-27.0592 0-49.46944-7.79776-67.3024-23.33184-17.80736-15.57504-28.14464-35.94752-30.99136-61.07136z"
                    p-id="2577"
                    fill="#A1A1A1"www.cppcns.com
 

                  ></path>
                </svg>
                <el-form-item prop="verification" class="input1">
                  <el-input
                    type="text"
                    v-model="ReginForm.verification"
                    placeholder="輸入驗證碼"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  >
                  </el-input>
                </el-form-item>
                <button
                  class="button_obtain"
                  v-show="sendAuthCode"
                  @click.prevent="getAuthCode"
                >
                  獲取驗證碼
                </button>
                <span v-show="!sendAuthCode" class="auth_text">
                  <span class="auth_text_blue">{{ auth_time }} </span>
                  秒之後重新發送驗證碼</span
                >
              </div>
              <el-form-item>
                <el-button
                  type="success"
                  class="register_button"
                  round
                  @click.native.prevent="submit"
                  :loading="logining"
                >
                  註冊
                </el-button>
              </el-form-item>
              <div class="permit">
                <span>登錄檔示閱讀與同意</span
                ><a href="#/permit" rel="external nofollow" >《軟體許可及服務協議》</a><span>與</span
                ><a href="#/privacy" rel="external nofollow" >《使用者隱私政策》</a>
              </div>
            </el-form>
          </el-main>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import Bg from '.
 
./assets/img/register/[email protected]';
export default {
  data() {
    let code = (rule,value,callback) => {
      if (value === "") {
        return callback(new Error("請輸入驗證碼"));
      } else if (value.length != 4) {
        return callback(new Error("輸入正確4位驗證碼"));
      } else {
        return callback();
      }
    };
    let telCheck = (rule,callback) => {
      var reg = /^1[3-9]\d{9}$/;
      if (value === "") {
        return callback(new Error("請輸入手機號碼"));
      } else if (!Number.isInteger(value)) {
        return callback(new Error("手機號碼必須是數字"));
      } else if (value.toString().length !== 11) {
        return callback(new Error("手機號碼必須是11位數字"));
      } else if (!reg.test(value)) {
        return callback(new Error("請輸入有效的手機號碼"));
      } else {
        callback();
      }
    };
    return {
      imageList:[Bg],token: String,ReginForm: {
        tel: "",verification: "",},logining: false,sendAuthCode: true,//顯示‘獲取按鈕'還是'倒計時'
      auth_time: 0 /*倒計時 計數器*/,//繫結輸入驗證碼框
      rule: {
        tel: [
          {
            required: true,validator: telCheck,//手機號正則限制
            trigger: "blur",],verification: [
          {
            required: true,validator: code,//驗證碼限制
            trigger: "blur",min: 6,max: 6,};
  },created() {
    const accountParam = {
      account: "gongchangku",password: "gongchangku",};
    this.$http
      .post(
        "https://newcp.51dsx.cn/index./api/user/getSysToken",ON.stringify(accountParam)
      )
      .then((data) => {
        this.token = data.data.data.token;
      });
  },methods: {
    // 點選獲取驗證碼
    async getAuthCode() {
      if (this.ReginForm.tel === "") {
        this.$message.error("請輸入手機號");
        return;
      }
      const params = {
        umobile: this.ReginForm.tel,token: this.token,};
      //獲取簡訊驗證碼介面
      this.$http
        .post(
          "https://newcp.51dsx.cn/index.php/api/Sms/sendVerificationCode",JSON.stringify(params),{
            headers: {
              token: this.token,}
        )
        .then((data) => {
          if (data.data.msg === "已被註冊") {
            this.sendAuthCode = true;
          this.$message.error("已被註冊");
          }
          return false;
        });
      if (this.ReginForm.tel === "") {
        this.sendAuthCode = true;
      } else {
        this.sendAuthCode = false;
      }
      /jtxknCQ
 
/設定倒計時秒
      this.auth_time = 60;
      var auth_timetimer = setInterval(() => {
        this.auth_time--;
        if (this.auth_time <= 0) {
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      },1000);
    },// 封裝註冊傳送請求方法
    thisAjax() {
      //  手機註冊
      let params = {
        umobile: this.ReginForm.tel,ucode: this.ReginForm.verification,};
 
      this.$http
        .post(
          "https://newcp.51dsx.cn/index.php/api/User/userWebRegister",}
        )
        .then((data) => {
          if (data.data.msg === "驗證碼不正確") {
            this.logining = false;
            this.$message.error("驗證碼不正確");
          } else {
            this.$message.success("註冊成功,即將跳轉到首頁");
            window.setTimeout(this.$router.push("/"),2)
          }
          return false;
        });
    },//點選註冊
    submit() {
      this.$refs.ReginForm[0].validate((valid) => {
        if (valid) {
          this.logining = true; //轉圈
 http://www.cppcns.com         this.thisAjax();
        } else {
          this.$message.error("填寫不完整或格式錯誤");
        }
      });
    },};
</script>
 
<style lang="s" scoped>
.icon2 {
  width: 0.75rem !important;
  height: 0.8rem !important;
  padding: 0 !important;
  margin: 0 4px 17px -4px;
  color: rgb(182,179,179) !important;
}
.verification {
  width: 25px !important;
  margin-right: 5px;
}
.input_phone {
  margin: 0 8px 0 2px;
}
@media (max-width: 414px) {
  .icon2 {
    width: 15% !important;
    padding: 0 !important;
    margin: 0 4px 17px 0px;
    color: rgb(182,179) !important;
  }
  .auth_text {
    font-size: 12px !important;
  }
  .button_obtain {
    margin: -22px 0 0 6px !important;
  }
  .el-main {
    padding: 0 !important;
  }
  .permit {
    height: 80px !important;
  }
  .register_button {
    height: 37px !important;
  }
  .button_obtain {
    width: 20%;
  }
  .input_phone {
    width: 5%;
    margin-left: 4px;
    margin-right: 8px;
  }
  .verification {
    width: 16px !important;
    margin: 0 6px 0 2px;
  }
  .icon1 {
    display: none !important;
  }
  .register_box_right {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .content {
    border-radius: 25px;
    box-shadow: 0 0 10px #c1cadd;
    background: #fff;
    padding: 0.5rem 0.3rem 0.3rem 0.3rem;
    margin: 1.555556rem auto !important;
  }
  .input1 {
    font-size: 0.296296rem !important;
  }
  .button_obtain {
    width: 58% !important;
    font-size: 0.222222rem !important;
  }
  .input1 {
    width: 55.5% !important;
  }
  .register_box_right {
    background: none !important;
  }
  .register_box .register_box_right .content .input button {
    top: -7px !important;
  }
}
@media (max-width: 900px) {
  .content {
    width: 7.5rem !important;
  }
}
@media (min-width: 1400px) {
  .register_box .icon1 img {
    width: 2rem !important;
  }
  .register_box .icon1 {
    width: 5rem !important;
  }
  .register_box .icon1 span {
    font-size: 0.444444rem !important;
  }
}
.el-main {
  padding: 0 !important;
}
.register_box {
  position: relative;
  width: 100%;
  height: 100vh;
  .icon1 {
    display: inline-block;
    width: 4rem;
    margin: 0.444444rem;
    padding: 0.444444rem 0;
    img {
      width: 1rem;
    }
    span {
      margin-left: 0.222222rem;
      font-size: 24px;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
    }
    .left_bottom {
      position: absolute;
      bottom: 0.8rem;
    }
  }
  .register_box_right {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: #ffffff;
    border-radius: 0.555556rem 0px 0px 0.555556rem;
    opacity: 1;
    .content {
      width: 8.592593rem;
      height: 70%;
      margin: 30vh auto;
      .inputs {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          margin-bottom: 21px;
        }
      }
      .auth_text {
        margin: -22px 0 0 10px;
      }
      .el-form-item {
        width: 100% !important;
      }
      .content_text {
        font-size: 0.518519rem;
        font-weight: 600;
        color: #525252;
        line-height: 0.611111rem;
        margin-bottom: 0.8rem;
      }
      .button_obtain {
        margin: -22px 0 0 5px;
      }
      butwww.cppcns.comton {
        height: 37px;
        width: 25%;
        border: none;
        color: #ffffff;
        background: linear-gradient(223deg,#8f99ed 0%,#b8ceef 100%);
        border-radius: 0.074074rem 0.074074rem 0.074074rem 0.074074rem;
        opacity: 1;
      }
 
      .register_button {
        width: 100%;
        height: 0.740741rem;
        border-radius: 0.111111rem 0.111111rem 0.111111rem 0.111111rem;
        opacity: 1;
        button {
          background: linear-gradient(223deg,#b8ceef 100%);
          width: 100%;
          height: 100%;
          border: none;
          font-size: 0.296296rem;
          font-weight: 500;
          color: #ffffff;
          line-height: 0.351852rem;
        }
      }
    }
    .permit {
      width: 100%;
      height: 0.740741rem;
      text-align: center;
      margin-top: 0.3rem;
      span {
        font-size: 0.26rem;
        font-weight: 500;
        color: #a1a1a1;
        line-height: 0.351852rem;
      }
      a {
        font-size: 13.5px;
        font-weight: 400;
        color: #007aff;
        line-height: 0.296296rem;
      }
    }
  }
}
</style>

到此這篇關於vue+element實現手機號驗證碼註冊的示例的文章就介紹到這了,更多相關element 手機號驗證碼註冊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！