【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）

原创

已于 2023-03-10 18:34:50 修改 · 1w 阅读

76 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #elementui #vue.js

于 2023-03-10 17:55:23 首次发布

本文展示了使用Vue.js创建一个包含手机号验证和登录功能的组件。主要涉及template、style和script部分，包括手机号格式判断、表单验证规则、获取验证码的倒计时功能以及登录按钮的处理。此外，还提到了样式编写和Axios接口的封装。

（2）然后封装一个axios接口，方便后面测试联调（这部分每个人封装的都不一样）

（3）然后是倒计时的方法

（4）最后的登录按钮

四、完整代码

效果图：

一、template部分

这里不是重点，自行对照，并不需要与之完全相同

<div>
    <el-form
        ref="form"
        label-width="70px"
        :inline="true"
        class="login-container"
        :model="form"
        :rules="rules"
    >
      <h3 class="login_title"> 手 机 验 证 登 录 </h3>

      <el-form-item
          label="手机号"
          prop="CellPhone"
          ref="phone"
      >
          <el-input v-model="form.CellPhone" placeholder="请输入手机号">
              <el-select placeholder="+86"></el-select>
          </el-input>
      </el-form-item>

      <el-form-item
          label="验证码"
          prop="VerificationCode"
      >
          <el-input v-model="form.VerificationCode" placeholder="请输入验证码">
              <el-button slot="suffix" :disabled="disabled" @click="getCode">
                  <span class="Time">{
  
  {btnTxt}}</span>
              </el-button>
          </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="submit" class="login_button" type="primary"> 登 录 </el-button>
      </el-form-item>
    </el-form>
  </div>

二、style样式

样式我是用less写的，编写之前需要安装less和less-loader

npm i less

npm i less-loader

值得注意的是，要注意版本，太新或者太久都可能导致无法运行

剩下的就是样式了：

<style lang="less" scoped>
.login-container {
  width: 450px;
  border:1px solid #eaeaea;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  background-color: #ffffff;
  box-sizing: border-box;
   //修改element的样式的方法有多种，/deep/只是其中一种
  /deep/ .el-input__inner {
    width: 120%;
    border: 0px;
    border-bottom: 1px solid;
  }
   .el-button {
    border: 0px;
    margin: -80px;
    .span {
      margin-left: 50px;
    }
  }
  .login_title {
    text-align: center;
    margin-bottom: 40px;
    color: #505458;
  }
  .el-input {
    width: 198px;
  }
  .login_button {
    margin-left: 105px;
    margin-top: 10px;
  }
  .time {
    width: 50px;
  }
}

</style>

样式里有的一行代码能写完的东西用了多行，可自行修改（别问我为什么不改