監(jiān)聽(tīng) input 事件，針對(duì)輸入的內(nèi)容還得做 手機(jī)號(hào)驗(yàn)證，如果驗(yàn)證通過(guò)了，切換 樣式class就好了.
下面是偽代碼

var elInput = $('#input');
var elBtn = $('#btn');
var reg = /^[1][3,4,5,7,8][0-9]{9}$/;

elInput.on('input', function() {
  var val = this.value;
  if (reg.test(val)) {
    elBtn.addClass('red');
  } else {
    elBtn.removeClass('red');
  }
});

目測(cè)一樓和二樓的方法皆有效果，主要看樓主想用哪種方法實(shí)現(xiàn)了，二樓連正確性檢驗(yàn)都一并附上了。另外還有document.getElementById(" ").addEventListener("keyup", function(){});

給input添加一個(gè)onkeyup事件，每次用戶輸入字符后觸發(fā)，里面的邏輯是判斷當(dāng)前輸入框長(zhǎng)度，夠11位設(shè)置后面文本變紅。

給input綁定一個(gè)input事件即可，檢測(cè)到輸入的數(shù)據(jù)達(dá)到11位時(shí)，按鈕則變?yōu)榭牲c(diǎn)擊狀態(tài)。

<input type="tel" class="phone" placeholder="請(qǐng)輸入手機(jī)號(hào)">

綁定事件：

document.querySelector('.phone').addEventListener('input', event=>{
    if( event.currentTarget.value.length>=11 ){
        alert( '發(fā)送驗(yàn)證碼' );
    }
})