vue实现验证码登录demo 【vue|vue实现短信验证码登录】不废话直接上demo
html
获取验证码
{{second}}秒后获取
登录
data
data() {
const validate_mobile = (rule, value, callback) => {
let reg = /^[1]([3-9])[0-9]{9}$/;
if (!value) {
callback("请输入手机号");
} else if (!reg.test(value)) {
callback("请输入正确的手机号");
} else {
callback();
}
};
return {
rules: {
mobile: [{ required: true, validator: validate_mobile, trigger: "blur" }],
code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
},
ruleForm:{
mobile:'',
code:''
},
sending: true,//是否发送验证码
disabled: false,//是否禁发验证码
second:59,//倒计时间
};
},
methods
//methods//倒计时
timeDown() {
let result = setInterval(()=>{
--this.second;
if(this.second < 0) {
clearInterval(result);
this.sending= true;
this.disabled = false;
this.second = 59;
}
}, 1000);
},//获取验证码
getCode(){
if(!this.sending){
return;
}
if(this.ruleForm.mobile == ''){
this.$message.error('请输入手机号')
}else{
//api接口封装请求
this.$http.user.getCode({
mobile:this.ruleForm.mobile
}).then(res=>{
this.sending= false;
this.disabled = true;
this.timeDown();
})
}
},
//提交
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
console.log('提交')
}
});
},
效果
文章图片
点击获取，按钮禁用并开始倒计时
文章图片
笔记：
api 封装后面会分享，目前是想到哪就写哪
后续还会分享微信钉钉字节小程序，uniapp, react, 常用操作，和踩过的坑
推荐阅读
- vue--获取手机短信验证码
- react|react技术分享----useState的原理及自定义useState的实现
- webpack|【优化】前端性能优化---计算首屏加载时间和首屏加载速度慢怎么解决（）
- JS|前端性能优化－－预加载技术
- 性能优化|前端性能优化-白屏时间(白屏经历了什么&白屏优化方案&CSS性能优化&内联关键CSS)
- react|react简单入门-react-router6.0及以上路由传参，以及接受参数
- react|react简单入门--常用hook中useQuery（react-query）的使用
- react|react简单入门--常用hook中useMemo的使用（详细版）
- vue性能优化|记一次前端性能优化——vue-cli4优化首屏加载