vue+element实现手机号验证码注册

原创

已于 2022-01-27 11:58:40 修改 · 置顶 · 4.9k 阅读

标签

#vue.js #前端 #elementui #注册 #token

于 2022-01-25 10:46:04 首次发布

本文介绍如何使用 Vue.js 和 ElementUI 框架实现手机号验证码注册功能，包括PC端和手机端的适配，以及解决跨域问题的方法，涉及到后端设置域名白名单和代理配置。

很全的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 61@2x.png" alt="" />
        <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/icon_phone@2x.png"
                  alt=""
                />
                <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