Question

我有一个简单的表格，有四个字段。我的问题是，即使在没有任何单击事件的情况下提供有效输入，表单验证错误消息也不会被删除。

下面是我使用按键事件获取解决方案的示例，但是由于键盘和数字小键盘的键码不同。还有没有其他方法可以在成功输入验证后立即消除错误消息，而无需按键事件和按钮单击。下面是我尝试使用的单个现场电话号码的示例代码。

//Code to remove error msgs after giving valid input with keypress event.

$(".error").hide();
$(".validate").keypress(function(event) {

  var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise

  // Allow: backspace, delete, tab, and enter
  var controlKeys = [8, 9, 13];
  //for mozilla these are arrow keys
  if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);

  // Ctrl+ anything or one of the conttrolKeys is valid
  var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));

  if (isControlKey) {
    return;
  }

  // stop current key press if it's not a number
  if (!(48 <= key && key <= 57)) {
    event.preventDefault();
    return;
  }
});

$('.validate').keyup(function() {

  var regex = new RegExp(/[^0-9]/g);
  var containsNonNumeric = this.value.match(regex);
  if (containsNonNumeric)
    $(".error").show();
  else $(".error").hide();
  //this.value = this.value.replace(regex, '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//Sample form with one field.
<form>
  Phone Number: <input type="text" name="firstname" class="validate">
  <div class="error"> Error! Only numericals allowed.</div>
</form>

请提供详细的名称，电子邮件和密码解决方案（如果没有按键事件且没有单击按钮的话）。

Answer 1

在这种情况下，您可以使用$ .focusout（）事件进行处理

例如： http://jsfiddle.net/v6ybua3j/

$(".error").hide();
$(".validate").keypress(function (event) {

        var key = event.which || event.keyCode; //use event.which if it's truthy, and default to keyCode otherwise

        // Allow: backspace, delete, tab, and enter
        var controlKeys = [8, 9, 13];
        //for mozilla these are arrow keys
        if ($.browser.mozilla) controlKeys = controlKeys.concat([37, 38, 39, 40]);

        // Ctrl+ anything or one of the conttrolKeys is valid
        var isControlKey = event.ctrlKey || controlKeys.join(",").match(new RegExp(key));

        if (isControlKey) {return;}

        // stop current key press if it's not a number
        if (!(48 <= key && key <= 57)) {
            event.preventDefault();
            return;
        }
    });

$('.validate').focusout(function () {

    var regex = new RegExp(/[^0-9]/g);
    var containsNonNumeric = this.value.match(regex);
    if (containsNonNumeric)
      $(".error").show();
    else $(".error").hide();
      //this.value = this.value.replace(regex, '');
});

另一种解决方案是使用setInterval（）

代码：http://jsfiddle.net/axLg8oqt/

$(".error").hide();

setInterval(function(){
    var regex = new RegExp(/[^0-9]/g);
    var containsNonNumeric = $('.validate').val().match(regex);
    if (containsNonNumeric)
      $(".error").show();
    else $(".error").hide();
},300)

成功验证后，无需单击按钮即可删除验证错误消息

1 个答案: