移动端验证码倒计时及实时监听输入框

应产品需求，需要在输入验证码时实时监听，如果输入六位验证码则提交按钮高亮，反之则置灰。

设置倒计时功能

//设置60秒倒计时，并在倒计时结束修改样式
function clsTimerFun() {
  let timerData = 60;
  let timerObject = $(".clstxtClick");
  timerObject.css({ "color": '#333' });
  timerObject.html(timerData + 's后重新获取')
  timerSet = window.setInterval(function () {
    timerData--;
    timerObject.html(timerData + 's后重新获取')
    if (timerData < 1) {
      clearInterval(timerSet);
      timerObject.html('重新获取');
      timerObject.css({ "color": '#5d9cec' });
    }
  }, 1000);
}

实时监听

• 初始是准备用input事件来进行监听的，但多少有些不合心意，所以在查阅后发现 propertychange方法可以解决这个问题。

• propertychange只要当前对象的属性发生改变就会触发该事件

$(".inputChange").bind("input propertychange", function () {
  let numReg = /^\d+(?=\.{0,1}\d+$|$)/;
  if (!(numReg.test($(this).val()))) {
    return false;
  } 
  //执行判断...
})

如此就可以完美解决达到实时监听了。