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 或更改事件

$('#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');
        }
    });

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

2 个答案: