search

Home  >  Q&A  >  body text

javascript - 第一次点击验证,button的正常倒计时,再次点击验证,验证和倒计时数字切换显示,请帮助?

<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中文网PHP中文网2908 days ago566

reply all(1)I'll reply

  • PHP中文网

    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);     

    reply
    0
  • Cancelreply