Exemples de numéro de téléphone mobile, de vérification régulière par e-mail et de code de vérification envoyés en 60 secondes dans Vue

Ci-dessous, je partagerai avec vous un exemple de numéro de téléphone portable, de vérification régulière par e-mail et d'envoi d'un code de vérification en 60 secondes dans Vue. Il a une bonne valeur de référence et j'espère que cela sera utile à tout le monde.

Aujourd'hui, j'ai écrit une vérification simple. J'avais initialement utilisé le composant auparavant, mais j'avais l'impression que le composant que j'avais écrit n'était pas très utile dans ce projet, car il est utilisé dans relativement peu d'endroits, je l'ai écrit directement sur. la page.

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

Voici le contenu du script

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde. avenir.

Articles connexes :

Comment obtenir les valeurs des paramètres de contexte à l'aide d'expressions EL dans JS

JS déplace la liste de gauche vers le Fonction Liste de droite

Utilisation de l'expression el en js et méthode de jugement non vide

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!