vue怎么实现手机验证码登录

这篇文章主要介绍“Vue怎么实现手机验证码登录”，在日常操作中，相信很多人在vue怎么实现手机验证码登录问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么实现手机验证码登录”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

验证码

<template>  <div>    <el-main>      <el-fORM :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">        <el-form-item label="手机号" prop="phone">          <el-input v-model="ruleForm.phone" placeholder="请输入手机号" size=""                    maxlength="11"></el-input>        </el-form-item>        <el-form-item label="验证码" prop="code">          <el-row :span="24">            <el-col :span="12">              <el-input v-model="ruleForm.code" auto-complete="off" placeholder="请输入验证码" size=""                        maxlength="4"                        @keyup.enter.native="submitForm('ruleForm')"></el-input>            </el-col>            <el-col :span="12">              <div class="login-code">                <!--验证码组件-->                <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}"                           :disabled="getCodeBtnDisable">{{ codeBtnWord }}                </el-button>              </div>            </el-col>          </el-row>        </el-form-item>        <!--滑动验证组件-->        <Verify></Verify>        <el-form-item>          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>        </el-form-item>      </el-form>    </el-main>  </div></template>

用到的vue验证工具类

export default {  // 限制只能输入数字(可以输入两位小数点)  limitInputPointNumber(val) {    if (val === 0 || val === "0" || val === "" || val === undefined) {      return "";    } else {      let value = null;      value = val.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符      value = value.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的      value = value        .replace(".", "$#$")        .replace(/\./g, "")        .replace("$#$", ".");      value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数      return value;    }  },  handleRouteToArray(route) {    const matchs = route.path.split('/')    matchs.shift()    let newMatch = []    matchs.map((item, i) => {      if (matchs[i - 1]) {        item = newMatch[i - 1] + '/' + item      }      newMatch.push(item)    })    newMatch = newMatch.map(item => {      return `/${item}`    })    return newMatch  },  //  密码长度8位以上，须包含大写、小写、数字、特殊符号中的任意3种  testPassWord: function (str) {    var rC = {      lW: '[a-z]',      uW: '[A-Z]',      nW: '[0-9]',      sW: '[\\u0020-\\u002F\\u003A-\\u0040\\u005B-\\u0060\\u007B-\\u007E]'    }    function Reg (str, rStr) {      var reg = new RegExp(rStr)      if (reg.test(str)) return true      else return false    }    if (str.length < 8) {      return false    } else {      var tR = {        l: Reg(str, rC.lW),        u: Reg(str, rC.uW),        n: Reg(str, rC.nW),        s: Reg(str, rC.sW)      }      if ((tR.l && tR.u && tR.n) || (tR.l && tR.u && tR.s) || (tR.s && tR.u && tR.n) || (tR.s && tR.l && tR.n)) {        // document.title = "密码符合要求"        return true      } else {        return false      }    }  },  // 密码验证8-30位任意字符  pwdReg: /^([0-9a-zA-Z]|(?:&)|(?:~)|(?:!)|(?:@)|(?:#)|(?:\$)|(?:%)|(?:\^)|(?:\*)){8,30}$/,  // 电话号码验证  phoneReg: /^1[3|4|5|6|7|8][0-9]{9}$/,  // 格式化金钱  formatUSD (val, currency) {    if (val === '' || val === '--' || val === undefined) {      return '--'    }    // 先判断数据是否有小数点    let newVal = String(Number(val).toFixed(2))    // 将科学计数转为正常的字符串显示    if (newVal.includes('e+')) {      newVal = Number(newVal).toLocaleString()      newVal = this.unFormatAmount(newVal)    }    let dotIdx = newVal.lastIndexOf('.')    let dotVal = '.00' // 保留小数点后面的数据    if (dotIdx >= 0) {      dotVal = newVal.substr(dotIdx, newVal.length)      newVal = newVal.slice(0, dotIdx)    }    let len = newVal.length    let arr = []    let lastIndex = null    while (len > 0) {      lastIndex = len      len -= 3      arr.unshift(newVal.substring(len, lastIndex))    }    val = arr.join(',')    if (currency) {      newVal = `${currency} ${val}${dotVal}`    } else {      // newVal = `$ ${val}${dotVal}`      newVal = `￥ ${val}${dotVal}` // 默认人民币    }    return newVal  },  // 格式化金额数字，不包含小数点，金额符等 输入整数  formatAmount (val) {    if (val === '' || val === '--' || val === undefined) {      return '--'    }    if (val === 0 || val === '0') {      return 0    }    // 先判断数据是否有小数点    let newVal = String(val)    let dotIdx = newVal.lastIndexOf('.')    let dotLength = 0    if (newVal.split('.').length > 1) {      dotLength = newVal.split('.')[1].length    }    let dotVal = '' // 保留小数点后面的数据    if (dotIdx >= 0) {      newVal = String(Number(val).toFixed(5))      dotVal = newVal.substr(dotIdx, dotLength + 1)      newVal = newVal.slice(0, dotIdx)    }    let len = newVal.length    let arr = []    let lastIndex = null    while (len > 0) {      lastIndex = len      len -= 3      arr.unshift(newVal.substring(len, lastIndex))    }    val = arr.join(',')    if (dotVal.length < 2) {      dotVal = ''    }    return val + dotVal  },  // 判断数据是否为空  isEmptyVal (val) {    if (val === undefined || val === '') {      return '--'    } else {      return val    }  },    // 格式化年月日   type: 中国显示方式(ch)及拼接的方式  // 注: 只有在接口传参时才需要中国的显示方式,其它为美式  formatYMD (now, type='ch') {    if (!now || now === 'null' || now === '--' || now === undefined) {      return '--'    }    if (Number(now)) {      now = new Date(now)    }    // 兼容IE浏览器 ， YY-MM-DD 格式    if (typeof now === 'string' && now.includes('-')) {      now = this.NewDate(now)    }    if (now) {      let year = ''      let month = ''      let date = ''      // 这里的8位用于返回如 20180423 这样的格式      if (String(now).length === 8 && String(now).indexOf('-') === -1 && String(now).indexOf('/') === -1) {        const getNow = String(now)        return `${getNow.substring(4, 6)}/${getNow.substring(6, 8)}/${getNow.substring(0, 4)}`      } else {        now = new Date(now)        year = now.getFullYear()        month = now.getMonth() + 1        date = now.getDate()      }      if (month < 10) {        month = `0${month}`      }      if (date < 10) {        date = `0${date}`      }      if (type === 'ch') {        return `${year}-${month}-${date}`      } else if (type) {        return `${year}${type}${month}${type}${date}`      } else {        return `${month}/${date}/${year}`      }    } else {      return ''    }  },  // 格式化时间 年，月，日，时，分，秒  formatDate (now, type) {    if (!now || now === 'null' || now === '--' || now === undefined) {      return '--'    }    if (now) {      now = new Date(now)      let year = now.getFullYear()      let month = now.getMonth() + 1      let date = now.getDate()      let hour = now.getHours()      let minute = now.getMinutes()      let second = now.getSeconds()      if (month < 10) {        month = `0${month}`      }      if (date < 10) {        date = `0${date}`      }      if (hour < 10) {        hour = `0${hour}`      }      if (minute < 10) {        minute = `0${minute}`      }      if (second < 10) {        second = `0${second}`      }      if (type) {        return `${month}/${date}/${year} ${hour}:${minute}:${second}`      } else {        return `${month}-${date}-${year}`      }    } else {      return ''    }  },}

直接放上完整的这样有助于看

<template>  <div>    <el-main>      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">        <el-form-item label="手机号" prop="phone">          <el-input v-model="ruleForm.phone" placeholder="请输入手机号" size=""                    maxlength="11"></el-input>        </el-form-item>        <el-form-item label="验证码" prop="code">          <el-row :span="24">            <el-col :span="12">              <el-input v-model="ruleForm.code" auto-complete="off" placeholder="请输入验证码" size=""                        maxlength="4"                        @keyup.enter.native="submitForm('ruleForm')"></el-input>            </el-col>            <el-col :span="12">              <div class="login-code">                <!--验证码组件-->                <el-button @click="getCode()" :class="{'disabled-style':getCodeBtnDisable}"                           :disabled="getCodeBtnDisable">{{ codeBtnWord }}                </el-button>              </div>            </el-col>          </el-row>        </el-form-item>        <!--滑动验证组件-->        <Verify></Verify>        <el-form-item>          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>        </el-form-item>      </el-form>    </el-main>  </div></template><script>//导入工具类import Verify from "@/components/Verify";import event from "../utils/event"import common from "@/utils/common";let params;export default {  name: "LoginIphone",  components: {Verify},  data() {    //使用正则表达式验证手机号    const checkPhone = (rule, value, callback) => {      if (!value) {        return callback(new Error('手机号不能为空'));      } else {        //获取工具类中的手机号正则表达式        const reg = common.phoneReg        // console.log(reg.test(value));        if (reg.test(value)) {          callback();        } else {          //如果验证输入错误就清空          this.ruleForm.phone = ''          return callback(new Error('请输入正确的手机号'));        }      }    };    return {      ruleForm: {        phone: '',        code: '',      },      codeBtnWord: '获取验证码', // 获取验证码按钮文字      // waitTime: 61, // 获取验证码按钮失效时间      waitTime: 2, // 获取验证码按钮失效时间      // 校验      rules: {        phone: [          {validator: checkPhone, trigger: 'blur'}        ],        code: [          {required: true, message: '请输入验证密码', trigger: 'blur'}        ]      }    };  },  //计算属性computed  computed: {    // 控制获取验证码按钮是否可点击    getCodeBtnDisable: {      //设置按钮61s      // get() {      //   if (this.waitTime === 61) {      //     if (this.ruleForm.phone) {      //       return false      //     }      //     return true      //   }      //   return true      // }      get() {        if (this.waitTime === 2) {          if (this.ruleForm.phone) {            return false          }          return true        }        return true      },      // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加      set() {      }    },  }, methods: {    getCode() {      const _this = this      params = {}      params.phone = this.ruleForm.phone      // 调用获取短信验证码接口      _this.$axiOS.post('/sendMessage', params).then(res => {        console.log("--------查看后台响应的值-----", res)        //把所有的数据存在        const mydata = res.data.data        console.log("我在短信接口这利-->", mydata)        //保存验证码        params.yz = mydata.vCode        console.log("我是查看验证码-------" + mydata.vCode)        console.log("我是查看调用的次数-------" + mydata.count)        if (res.data.code === 200) {          this.$message({            message: '验证码已发送，请稍候...',            type: 'success',            center: true          })        }        if (res.data.data.count >= 5) {          //调用滑块验证的组件          event.$emit("VERIFY")        }      })      // 因为下面用到了定时器，需要保存this指向      let that = this      that.waitTime--      that.getCodeBtnDisable = true      this.codeBtnWord = `${this.waitTime}s 后重新获取`      let timer = setInterval(function () {        if (that.waitTime > 1) {          that.waitTime--          that.codeBtnWord = `${that.waitTime}s 后重新获取`        } else {          clearInterval(timer)          that.codeBtnWord = '获取验证码'          that.getCodeBtnDisable = false          // that.waitTime = 61          that.waitTime = 2        }      }, 1000)    },    submitForm(formName) {      const _this = this      //判断输入的验证码是否为空      if (this.ruleForm.code != null) {        this.$refs[formName].validate((valid) => {          if (valid) {            _this.$axios.post("/iosLogin", {              "phone": this.ruleForm.phone,              "Verification": this.ruleForm.code            }).then(res => {              console.log(res.data)            })            // console.log("我是提交里面的：", par)            //            // const Jwt = par.headers['authorization']            // console.log("我是token->", jwt)            // const userInfo = par.data.data            // console.log("查看用户信息=", userInfo)            //            // // 把数据共享出去            // _this.$store.commit("SET_TOKEN", jwt)            // _this.$store.commit("SET_USERINFO", userInfo)            //            // // 获取            // console.log("我是获取的_this.$store.getters.getUser")            // console.log(_this.$store.getters.getUser)            // _this.$router.push("/blogs")          } else {            console.log('error submit!!');            return false;          }        });      } else {        this.$message({          showClose: true,          message: '请输入错误',          type: 'error'        });      }    }  }}</script><style scoped>.el-button.disabled-style {  background-color: #EEEEEE;  color: #CCCCCC;}.demo-ruleForm {  max-width: 500px;  margin: 0 auto;}</style>

到此，关于“vue怎么实现手机验证码登录”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！