vue实现用户注册获取验证码及验证码校验功能（部分代码）

2024-06-27 00:57| 来源: 网络整理| 查看: 265

首先需要明确业务需求：

前端需要对用户手机号码校验（手机号格式、手机号输入框是否为空）需要对验证码校验（验证码输入格式、验证码输入框是否为空）获取验证码按钮校验（控制验证码60s内不可重复提交、判断验证码是否和输入框中的值相同、验证码输入框是否为空）根据不同返回结果给予不同的提示手机号已绑定（别人已绑定）手机号为当前用户已绑定后端：集成发送短信验证码能力随机生成六位数短信验证法校验手机号是否已绑定存储

一个简单的用户手机号绑定/注册的业务大致就是这些，接下来我们开始做。首先做前端，基本框架搭建：

1、先搭框架

新手机号码: 短信验证码：获取验证码剩余{{second}}s

绑定

2、搭建vue部分代码

new Vue({ el: "#myCell", data: { telNumber: '', //手机号 msgCheck: '', //短信验证码 msg: '', //消息提示 submitFlag:true, //防止重复提交操作 second: 60, //获取验证码间隔时间60s flag: true, timer: null, // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval }, methods: { save() { var cellObj = {telNumber: ''}; cellObj.telNumber = this.telNumber; var yanzhenma = $("#yanzhenma").val(); if (this.msgCheck !== yanzhenma){ this.msg = "请输入正确的验证码"; }else { axios({ url: ctx + "test/msg/add", method: "post", contentType: "application/json", data: cellObj }).then(res => { if(res.data.code === 2000) { this.msg = "绑定手机号成功！"; $("#bind").css("background", "#ccc"); this.submitFlag = false; }else if(res.data.code === 1001){ this.msg = "该手机号已被人绑定，请确认手机号码是否正确！"; }else if(res.data.code === 1002){ this.msg = "当前手机号您已经绑定！"; }else { this.msg = res.data.msg; } }); } }, getCode() { if(!this.flag){ this.msg = "验证码已发送至您的手机，请注意查收"; }else{ var telNumber = $("#telNumber").val(); if(telNumber == null ||telNumber.length == 0){ this.msg = "请输入手机号"; }else{ var that = this; if (that.flag) { that.flag = false; var interval = window.setInterval(function() { if (that.second-- { if(res.data.code === 2000){ $("#yanzhenma").val(res.data.data); alert("验证码已成功发送到您的手机，请注意查收") }else{ this.msg = res.data.msg; } }) }, check() { this.telNumber = $("#telNumber").val(); this.msgCheck = $("#msgCheck").val(); if(!this.submitFlag) { this.msg = "请勿重复提交！"; return; } if (this.telNumber === '') { this.msg = '请输入手机号码'; return; } if(!(this.phone(this.telNumber))){ this.msg = "请您输入正确的手机号码！"; return; } if (this.msgCheck === '') { this.msg = '请输入短信验证码'; return; }else{ this.save(); } }, phone(TEL){ var strTemp = rule = /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/; if (strTemp.test(TEL)) { return true; } return false; }, clearMsg() { if (this.msg !== ''){ this.msg = ''; return } }, } });

其中：

phone(TEL)方法用户校验手机号码格式的正则表达式；check方法校验输入框用户提交页面产生的所有可能发生的情况校验；getCode方法集成发送验证码能力sendMsg()获取表单中用户的手机号，带入后台进行业务逻辑处理。getCode()中使用了计时器setInterval(),实现每隔60秒后用户才可以点击发送短信验证码功能，（该方法做的还不够完善，就是当用户关闭页面之后再打开页面，计时器应该存在，可以考虑存入cookie中或localstroage中）

2、后台获取前端axios中的两个方法（一个是发送短信验证码、一个是存储用户手机号）

发送短信验证码： /** * 发送短信验证码 * @param cell * @return */ @PostMapping("/sendMsg") @ResponseBody public ResponseEntity sendMsg(@RequestBody Cell cell){ String telNumber = cell.getTelNumber(); //随机生成6位数的短信验证码 String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000); //调用工具发送 SendMsgUtil.sendCode(telNumber,verifyCode); //同时将验证码传回给前端用于判断用户输入的验证码是否和发送的验证码相同 return ResponseUtil.success(verifyCode); 存储用户手机号（前端验证码校验成功）就是普通的插入操作，就不必细讲了！

【本文地址】

公司简介

联系我们