<template>
<div>
<h1>{{msg}}</h1>
<form action="" method="get" class="form">
<div class="input">
<input type="text" v-model="number" @input="isPhone()" maxlength="11" autofocus placeholder="请输入手机号码">
<input type="button" @click="changeMsg" v-model="message" :disabled="disabled" >
<div class="errorColor" v-show="isShow">电话号码输入有误,请重新输入</div>
<div><input type="text" name="" id="" placeholder="请输入验证码"></div>
<input type="submit" value="提交">
</div>
</form>
</div>
</template>
<script>
export default{
data(){
return{
msg:"短信验证码",
number:'',
message:'发送验证码',
disabled: true,
time: 5,
isShow: false,
}
},
methods:{
isPhone(){
var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
if(this.number.length ==11){
if(!reg.test(this.number)){
this.isShow = true;
}else {
this.disabled = false;
console.log('电话号码输入正确!');
}
}else {
this.disabled = true;
this.isShow = false;
}
// console.log(reg)
},
changeMsg(){
this.disabled = true;
this.message = this.time + 's后重新获取';
var timer = setInterval(()=>{
this.time--;
this.time = this.time>=0?this.time:0;
this.message = this.time + 's后重新获取';
if(this.time == 0){
this.message = '重新获取';
this.disabled = false;
clearInterval(timer);
this.time = 5;
}
},1000)
}
}
}
</script>
<style scoped>
h1 {
text-align: center;
}
.input {
text-align: initial;
width: 285px;
margin: 0 auto;
}
.form {
width: 100%;
margin: 0 auto;
}
input {
outline: none;
margin-top: 20px;
margin-right: 20px;
}
input::placeholder {
text-indent: 10px;
}
input[type=text] {
height: 30px;
text-indent: 10px;
}
input[type=submit]{
width: 100%;
height: 30px;
margin: 20px auto 0;
}
input[type=button] {
display:inline-block;
width:90px;
height: 34px;
margin-right:0;
}
.errorColor {
color: red;
margin-top: 10px;
}
</style>
vue中判断电话号码的正则及验证
最新推荐文章于 2024-05-14 19:39:52 发布