vue实现手机验证码登录

已于 2023-05-22 14:33:36 修改
阅读量548 收藏 1
点赞数
文章标签： javascript 前端 java
于 2023-05-22 09:12:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56632239/article/details/130800116
版权 

<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实现短信验证码登录
记得我所记得的
07-29 3618
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，最后先服务器发送请求，保存登录的信息，一个必不可少的功能 思路 1，先判断手机号和验证是否为空， 2，点击发送验证码，得到验证码 3，输入的验证码是否为空和是否正确， 4，最后向服务发送请求 界面展示 1.准备工作 这个会对input进行封装处理 <templ...
vue实现手机验证码登录（基于娱乐系统项目）
m0_70647221的博客
05-09 428
手机注册 <span v-show=“sendAuthCode” class 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 =“auth_text auth_text_blue” @click=“getAuthCode”>获取验证码 {{auth_time}} 秒之后重新发送验证码 <el-button type=“success” class=“submitBtn” round @c..
VUE-手机号验证码登录功能
一大玉的小笔记
02-01 1166
手机号验证码登录
Vue.js + Element UI 实现多方式登录功能（账号/手机号验证码登录）
最新发布
weimengen的博客
10-12 598
本文详细介绍了如何使用Vue.js和Element UI实现一个多方式登录功能的登录页面。通过本文的学习，你可以掌握如何根据用户选择动态切换表单、如何进行表单验证以及如何实现验证码的发送和倒计时功能。希望本文对你有所帮助，如果你在实现过程中遇到任何问题，欢迎在评论区留言讨论。
vue实现短信验证码登录功能（流程详解）
10-15
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下
Vue项目：如何实现短信验证码登录？
Forest_2Cat的博客
06-22 3496
1.选择一个短信平台，这里选择网建短信通，在该平台进行注册。 2.在该平台进行登录，点开接口设置功能可以看到用户名，安全密钥以及短信签名，如果发送的短信内容是验证码的话，最好加上短信签名，如在短信签名输入框中写：安全公司 3.在项目中进行功能的实现 Step1：安装axios依赖 方法： 1.在package.json中的dependencies中添加"axios": "^0.21.1", 2.在终端命令行中输入npm install，进行安装 Step2：在vue.config.js中配置跨域 dev
Vue 实现登录界面验证码功能
10-15
### Vue实现登录界面验证码功能知识点 Vue是一种用于构建用户界面的渐进式JavaScript框架。在现代web开发中，Vue经常被用来开发复杂的单页应用程序。验证码是web应用中常见的安全特性，用于确保用户是真实的人而非...
vue 实现通过手机发送短信验证码注册功能
08-27
主要介绍了vue 实现通过手机发送短信验证码注册功能的相关资料,需要的朋友可以参考下
Vue实现发送短信验证码
05-09
此资源主要是vue实现通过发送短信验证码进行登录，其中的密钥需要自己去sms平台进行申请.
Vue3问题：如何实现短信验证码登录？前后端！
m0_74802419的博客
11-08 3597
点击发送验证码按钮，获取手机短信验证码。此时，发送验证码按钮进入倒计时状态，且不可被点击。 成功获取到短信验证码并输入，点击登录按钮，完成页面跳转。
vue实现通过手机号发送短信验证码登录
qq_45487080的博客
05-20 5668
vue实现通过手机号发送短信验证码登录
Vue登录验证码
WJaLYL的博客
05-15 2621
Vue登录验证码的实现 1、新建ValidCode.vue组件 <template> <div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode" > <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)" >{{ item.c
vue接口token认证登录（加手机验证）
前方的路在刚开始
07-04 3505
做一样东西就尽可能把他做好，因为人有【保存体力的天性】，一旦成型，很不想花时间去改------从自己身上总结需求：用户没有登录不能跳转任何页面，只能登录实现思路：用户登录，后端验证，返回token，前端拿token，存储到cookie中，请求后端，其他接口，传递token。条件:我是使用vue2-cli的脚手架搭建的，所以主要配置是在main.js中设置思路拆卸：1.登录页面1-2补:前端输入验证（电话号码格式、不为空、点击发送验证码后60秒计时，刷新也无效）2.后端验证接口3.后端生成token方法4.获
vue实现登录验证码
LiChengzhong的博客
04-12 6348
vue实现登录验证码
Vue实现验证码登录
不愧是暮言的博客
11-27 9419
在我们进行登录的时候，为了保护系统的安全性，也是防止恶意进行登录，进入到后台盗取数据，因此我们在登录的环节进行一定的安全保护，提升系统安全等级。在此我们运用阿拉伯数字和英文字母进行4位数的验证码校验，当然也可以进行多位字符进行校验，在此我使用生成4位验证码进行校验，后续会有滑块验证！！！！！！
vue实现验证码验证登录
adingyb的博客
04-07 609
vue实现验证码验证登录。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值