이번에는 Vue 휴대폰 및 이메일 정기 인증 절차에 대해 자세히 설명드리겠습니다. Vue 휴대폰 및 이메일 정기 인증 주의 사항은 무엇인가요? 다음은 실제 사례입니다.
오늘은 예전에 컴포넌트를 간단하게 작성했는데, 이번 프로젝트에서는 별로 유용하지 않은 것 같아서 페이지에 직접 작성해봤습니다.
<p> <p class="fl"> <input name="phone" type="number" placeholder="手机号" v-model="phone"/> <button type="button" :disabled="disabled" @click="sendcode" class="btns">{{btntxt}}</button> </p> <p class="fl" style="margin-left: 20px;"> <input type="text" placeholder="验证码"/> </p> </p> <input type="button" value="查询" class="btns search" @click="query"/>
스크립트 내용은 다음과 같습니다
export default { data: function () { return { disabled:false, time:0, btntxt:"获取验证码", formMess:{ email:this.email, phone:this.phone } } }, mounted: function () { }, methods:{ //验证手机号码部分 sendcode(){ var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/; //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone; if(this.phone==''){ alert("请输入手机号码"); }else if(!reg.test(this.phone)){ alert("手机格式不正确"); }else{ this.time=60; this.disabled=true; this.timer(); /*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(){ var formMess=this.formMess Axios.post(api+"/order/select/reception", formMess) .then(function (res) { if(res.data.code==200){ console.log(res.data.data); this.productResult=res.data.data; this.productResult.length=3; }else if(res.data.code==400){ alert(res.data.message) } }.bind(this)) }, //邮箱验证 sendEmail(){ var regEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if(this.email==''){ alert("请输入邮箱"); }else if(!regEmail.test(this.email)){ alert("邮箱格式不正确"); } } } }
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
vue+axios 양식에 이미지를 업로드하는 단계에 대한 자세한 설명
axios 이미지 양식을 제출하기 위해 게시물 요청을 보내는 단계에 대한 자세한 설명
위 내용은 Vue 휴대폰 및 이메일 정기 인증 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!