当前位置: 首页 > Web前端 > HTML5

vue中手机号、邮箱定时验证和60s发送验证码

时间:2023-04-05 23:56:57 HTML5

今天写了一个简单的验证。之前本来是用组件的,但是感觉写的组件在这个项目中用处不大。由于用的地方少,所以直接写在页面上。页面显示如图

{{btntxt}}

这里是脚本exportdefault{data:function(){return{disabled:false,time:0,btntxt:"获取验证码",formMess:{email:this.email,phone:this.phone}}},mounted:function(){},methods:{//验证手机号部分sendcode(){varreg=11&&/^((13|14|15|17|18)[0-9]{1}\d{8})$/;//varurl="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone;if(this.phone==''){alert("请输入电话号码");}elseif(!reg.test(this.phone)){alert("手机格式不正确");}else{this.time=60;这个。禁用=真;这个。计时器();/*axios.post(url).then(res=>{this.phonedata=res.data;})*/}},timer(){if(this.time>0){this.time--;this.btntxt=this.time+"s后重新获取";setTimeout(this.timer,1000);}else{this.time=0;this.btntxt="获取验证码";this.disabled=false;}},query(){varformMess=this.formMessAxios.post(api+"/order/select/reception",formMess).then(function(res){if(res.data.code==200){控制台。日志(res.data.data);this.productResult=res.data.data;this.productResult.length=3;}elseif(res.data.code==400){alert(res.data.message)}}.bind(this))},//邮箱验证sendEmail(){varregEmail=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;if(this.email==''){alert("请输入您的邮箱地址");}elseif(!regEmail.test(this.email)){alert("邮件格式不正确");}}}}

最新推荐
猜你喜欢