输入字段中的验证不是实时的

Question

我想在我的网站上进行前缀验证，我一直在寻找并得到我想要的东西，但问题是，当我在输入表单中键入一个值时没有发出通知错误，当​​我点击任何焦点不在输入栏的地方就会出现错误提示。我想在输入字段中输入时立即注意到其中一个，而无需提前单击任何位置。如果有人可以帮助我吗？

这是我的验证代码部分：

$(document).ready(function() {
  $('#jkeyboard').blur(function(e) {
    if (validatePhone('jkeyboard')) {
      $('#spnPhoneStatus').html('<b>Prefix Valid</b>');
      $('#spnPhoneStatus').css('color', 'green');
    } else {
      $('#spnPhoneStatus').html('<b>Wrong Prefix</b>');
      $('#spnPhoneStatus').css('color', 'red');
    }
  });
});

function validatePhone(jkeyboard) {
  var a = document.getElementById(jkeyboard).value;
  var filter = /^0(?:8(?:(?:1(?:[789][0-9]{0,8})?|3(?:[1238][0-9]{0,8})?|5(?:9[0-9]{0,8})?|7(?:[78][0-9]{0,8})?)?)?)?$/;
  //var filter = /^0([8]([1357]([123789]([0-9]{0,8}))?)?)?$/;
  if (filter.test(a)) {
    return true;
  } else {
    return false;
  }
}

Answer 1

使用input事件

$('#jkeyboard').on('input', function(e) {
    if (validatePhone('jkeyboard')) {
        $('#spnPhoneStatus').html('<b>Prefix Valid</b>');
        $('#spnPhoneStatus').css('color', 'green');
    } else {
        $('#spnPhoneStatus').html('<b>Wrong Prefix</b>');
        $('#spnPhoneStatus').css('color', 'red');
    }
});

$(document).ready(function() {
  $('#jkeyboard').on('input', function(e) {
    if (validatePhone('jkeyboard')) {
      $('#spnPhoneStatus').html('<b>Prefix Valid</b>');
      $('#spnPhoneStatus').css('color', 'green');
    } else {
      $('#spnPhoneStatus').html('<b>Wrong Prefix</b>');
      $('#spnPhoneStatus').css('color', 'red');
    }
  });
});

function validatePhone(jkeyboard) {
  var a = document.getElementById(jkeyboard).value;
  var filter = /^0(?:8(?:(?:1(?:[789][0-9]{0,8})?|3(?:[1238][0-9]{0,8})?|5(?:9[0-9]{0,8})?|7(?:[78][0-9]{0,8})?)?)?)?$/;
  //var filter = /^0([8]([1357]([123789]([0-9]{0,8}))?)?)?$/;
  if (filter.test(a)) {
    return true;
  } else {
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="jkeyboard" />
<div id="spnPhoneStatus"></div>

Answer 2

使用 keyup 或 change 事件

$('#jkeyboard').on('keyup', function(e) {
    if (validatePhone('jkeyboard')) {
        $('#spnPhoneStatus').html('<b>Prefix Valid</b>');
        $('#spnPhoneStatus').css('color', 'green');
    } else {
        $('#spnPhoneStatus').html('<b>Wrong Prefix</b>');
        $('#spnPhoneStatus').css('color', 'red');
    }
});

或

$('#jkeyboard').on('change', function(e) {
        if (validatePhone('jkeyboard')) {
            $('#spnPhoneStatus').html('<b>Prefix Valid</b>');
            $('#spnPhoneStatus').css('color', 'green');
        } else {
            $('#spnPhoneStatus').html('<b>Wrong Prefix</b>');
            $('#spnPhoneStatus').css('color', 'red');
        }
    });