휴대폰번호, 이메일 정기인증, Vue에서 60초 안에 전송되는 인증코드 예시

아래에서는 Vue에서 휴대폰 번호, 이메일 정기 인증 및 60초 안에 인증 코드 전송의 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모두에게 도움이 되기를 바랍니다.

오늘은 간단한 검증글을 작성했습니다. 예전에 컴포넌트를 사용했었는데, 제가 작성한 컴포넌트가 이번 프로젝트에서는 별로 쓸모가 없는 것 같아서 페이지에 직접 작성했습니다.

<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("邮箱格式不正确");
    }
   }
  }
 }

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

JS에서 컨텍스트 매개변수 값을 얻기 위해 EL 표현식을 사용하는 방법

JS에서 왼쪽 목록을 오른쪽 목록으로 이동하는 기능을 구현하는 방법

EL 표현식 사용 Node.js와 비어 있지 않은 판단 방법

위 내용은 휴대폰번호, 이메일 정기인증, Vue에서 60초 안에 전송되는 인증코드 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!