Beispiele für Mobiltelefonnummer, regelmäßige E-Mail-Bestätigung und Bestätigungscode, der in Vue innerhalb von 60 Sekunden gesendet wird

Im Folgenden werde ich Ihnen ein Beispiel für die regelmäßige E-Mail-Verifizierung und das Senden eines Bestätigungscodes in 60 Sekunden in Vue vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Heute habe ich eine einfache Überprüfung geschrieben, die ich ursprünglich verwendet habe, aber ich hatte das Gefühl, dass die Komponente, die ich geschrieben habe, in diesem Projekt nicht sehr nützlich war, und habe sie direkt weitergeschrieben die Seite.

<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"/>

Hier ist der Inhalt des Skripts

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie EL-Ausdrücke, um Kontextparameterwerte in JS zu erhalten

JS verschiebt die linke Liste nach die richtige Listenfunktion

Verwendung des el-Ausdrucks in js und nicht-leerer Beurteilungsmethode

Das obige ist der detaillierte Inhalt vonBeispiele für Mobiltelefonnummer, regelmäßige E-Mail-Bestätigung und Bestätigungscode, der in Vue innerhalb von 60 Sekunden gesendet wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!