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

Validation not realtime in input field

本文关键字：实时 验证 输入 字段      更新时间：2023-09-26

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

这是我的验证代码部分：

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

使用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>

使用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');
        }
    });
相关文章：