<meta charset="utf-8">
<p id="app">
<input type="text" v-model="tel" placeholder="手机号" value="13344445555">
<button type="button" v-on:click="send" v-bind:disabled="!tel.length || !validation.tel">
验证
</button>
</p>
<script src="https://cdn.jsdelivr.net/vue/1.0.7/vue.js"></script>
<script>
var telReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
var vm = new Vue({
el: '#app',
data: {
tel: ''
},
computed: {
validation: function() {
return {
tel: telReg.test(this.tel)
}
},
isValid: function() {
var validation = this.validation
return Object.keys(validation).every(function(key) {
return validation[key]
})
},
},
methods: {
send: function(event) {
var t = 5;
event.target.disabled = false;
setInterval(function() {
if (t > 0) {
event.target.innerHTML = t--;
event.target.disabled = true;
} else {
window.clearInterval(0);
event.target.innerHTML = '验证';
event.target.disabled = false;
}
}, 1000);
}
}
})
</script>
PHP中文网2017-04-10 16:30:21
我知道了,改成这样就可以了
var i = setInterval(function(){
if(t > 0) {
event.target.innerHTML = t--;
event.target.disabled = true;
} else {
window.clearInterval(i);
event.target.innerHTML ='验证';
event.target.disabled = false;
}
}, 1000);