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

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

效果图：

一、template部分

二、style样式

三、script部分

1.先对手机号的格式进行一个判断

2.接下来就是表单验证规则rules

3.最后就是methods了

（1）首先我们给获取验证码绑定一个方法

（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>

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

三、script部分

1.先对手机号的格式进行一个判断

const validatePhone = (rule, value, callback) => {
       // console.log(rule)
      // console.log(value)
      // console.log(callback)

      // 判断输入框中是否输入手机号
      if (!value) {
        callback(new Error('手机号不能为空'))
      }
      //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
      if (!/^1[35789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确'))
      }
      callback()
    }

2.接下来就是表单验证规则rules

rules: {
        CellPhone: [
          { required: true, trigger: 'blur', message: '请输入11位手机号'},
          { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
          { required: true, trigger: 'blur', validator: validatePhone}
        ],
        VerificationCode: [
          { required: true, trigger: 'blur', message: '请输入4位验证码'},
          { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
        ],
      }

required

是否必填，如不设置，则会根据校验规则自动生成

boolean

—

false

trigger

触发方式

String

click/focus/hover/manual

click

blur

在 Input 失去焦点时触发

(event: Event)

validate

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

Function(callback: Function(boolean, object))

3.最后就是methods了

（1）首先我们给获取验证码绑定一个方法

//获取手机验证码方法
    getCode() {
      // 校验手机号码
      if (!this.form.CellPhone) {
        //号码校验不通过
        this.$message({
          message: '请输入手机号',
          type:'warning',
        });
        //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
      } else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
        // 失去焦点后自动触发校验手机号规则
      } else {
        this.time = 60;
        this.disabled = true;
        //调用倒计时方法
        this.timer();
    }
}

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

GetPhone({
          CellPhone: this.form.CellPhone,
        }) .then(({data}) => {
          if (data.code === 200) {
            this.$message({
              message: '验证成功',
              type: 'su***ess',
            })
          } else {
            this.$message({
              message: '发送失败',
              type: 'warning',
            })
          }
        })

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

timer() {
      if (this.time > 0) {
        this.time--;
        // console.log(this.time);
        this.btnTxt = this.time + "s后重新获取验证码";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btnTxt = "获取验证码";
        this.disabled = false;
      }
    },

（4）最后的登录按钮

submit() {
      this.getCode(({data}) => {
        if (data.code === 200) {
          this.$router.push('/')
        } else {
          this.$message.error(data.data.rules.message)
        }
      })
    }

四、完整代码

<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>
</template>

<script>
import {GetPhone} from "@/Api/api";

export default {
  name: "AppPhone",
  data() {
    const validatePhone = (rule, value, callback) => {
      // console.log(rule)
      // console.log(value)
      // console.log(callback)
      // 判断输入框中是否输入手机号
      if (!value) {
        callback(new Error('手机号不能为空'))
      }
      //正则表达式进行验证手机号，从1开始，第二位是35789中的任意一位，以9数字结尾
      if (!/^1[35789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确'))
      }
      callback()
    }
    return {
      btnTxt: "获取验证码",
      // 是否禁用  即点击之后一段时间内无法再点击
      disabled: false,
      time: 0,
      form: {
        CellPhone: '',
        VerificationCode: '',
      },
      rules: {
        CellPhone: [
          { required: true, trigger: 'blur', message: '请输入11位手机号'},
          { required: true, trigger: 'blur', min: 11, max: 11, message: '长度不符合'},
          { required: true, trigger: 'blur', validator: validatePhone}
        ],
        VerificationCode: [
          { required: true, trigger: 'blur', message: '请输入4位验证码'},
          { required: true, trigger: 'blur', min: 6, max: 6,message: '验证码错误'}
        ],
      }
    }
  },
  methods: {
    //获取手机验证码方法
    getCode() {
      // 校验手机号码
      if (!this.form.CellPhone) {
        //号码校验不通过
        this.$message({
          message: '请输入手机号',
          type:'warning',
        });
        //正则判断 从1开始，第二位是35789中的任意一位，以9数字结尾
      } else if (!/1[35789]\d{9}/.test(this.form.CellPhone)) {
        // 失去焦点后自动触发校验手机号规则
      } else {
        this.time = 60;
        this.disabled = true;
        //调用倒计时方法
        this.timer();
        // 封装的axios接口
        GetPhone({
          CellPhone: this.form.CellPhone,
        }) .then(({data}) => {
          if (data.code === 200) {
            this.$message({
              message: '验证成功',
              type: 'su***ess',
            })
          } else {
            this.$message({
              message: '发送失败',
              type: 'warning',
            })
          }
        })
      }
    },
    // 倒计时方法
    timer() {
      if (this.time > 0) {
        this.time--;
        // console.log(this.time);
        this.btnTxt = this.time + "s后重新获取验证码";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btnTxt = "获取验证码";
        this.disabled = false;
      }
    },
    // 提交按钮
    submit() {
      this.getCode(({data}) => {
        if (data.code === 200) {
          this.$router.push('/')
        } else {
          this.$message.error(data.data.rules.message)
        }
      })
    }
  }
}
</script>

<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;
  /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>

若有不足或错误之处，欢迎指点

前端 elementui vue.js

转载请说明出处内容投诉
CSS教程_站长资源网 » 【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面，路由式开发（附完整代码）

艾热ar上海商贸艾热ar隔膜泵

分享到：

效果图：

一、template部分

二、style样式

三、script部分

1.先对手机号的格式进行一个判断

2.接下来就是表单验证规则rules

3.最后就是methods了

（1）首先我们给获取验证码绑定一个方法

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

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

（4）最后的登录按钮

四、完整代码

若有不足或错误之处，欢迎指点

艾热ar上海商贸艾热ar隔膜泵

相关推荐

发表评论

一个令你着迷的主题！