Maison > interface Web > js tutoriel > 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

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

亚连
Libérer: 2018-05-29 17:41:49
original
2513 Les gens l'ont consulté

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"/>
Copier après la connexion

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==&#39;&#39;){
     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==&#39;&#39;){
     alert("请输入邮箱");
    }else if(!regEmail.test(this.email)){
     alert("邮箱格式不正确");
    }
   }
  }
 }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal