I wrote a simple verification today. I used the components I used before, but I felt that the components I wrote were not very useful in this project. Since there were fewer places to use, I wrote them directly on the page.
<div>
<p class="fl">
<input name="phone" type="number" placeholder="Phone number" 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="Verification Code"/>
</p>
</div>
<input type="button" value="Query" class="btns search" @click="query"/>
Here is the content in script
export default {
data: function () {
return {
disabled:false,
time:0,
btntxt:"Get verification code",
formMess:{
email:,
phone:
}
}
},
mounted: function () {
},
methods:{
//Verify mobile phone number part sendcode(){
var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
//var url="/nptOfficialWebsite/apply/sendSms?mobile="+;
if(==''){
alert("Please enter your mobile phone number");
}else if(!()){
alert("The phone format is incorrect");
}else{
=60;
=true;
();
/*(url).then(
res=>{
=;
})*/
}
},
timer() {
if ( > 0) {
--;
=+"Re-acquire after s";
setTimeout(, 1000);
} else{
=0;
="Get verification code";
=false;
}
},
query(){
var formMess=
(api+"/order/select/reception", formMess)
.then(function (res) {
if(==200){
();
=;
=3;
}else if(==400){
alert()
}
}.bind(this))
},
//Email Verification 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(==''){
alert("Please enter your email");
}else if(!()){
alert("The email format is incorrect");
}
}
}
}
The above examples of mobile phone number, email regular verification and 60s verification code sent in vue are all the content I share with you. I hope you can give you a reference and I hope you can support me more.