javascript - 使用 jquery 根据模式验证输入框并在出现错误时显示 div

Question

我有很多文本框需要以某种模式输入。 在 jquery 加载时，我将一个模式属性附加到我有兴趣处理的每个文本框。 我现在想要实现的是，在输入文本框并失去焦点后，我想测试该模式并显示一个 div，如果它与模式不匹配，它将显示一个错误框。我无法确定应该如何根据模式验证文本并显示 div。

<input id="test-1">
<div id="test-1-error"class="alert" style="display:none">
  This is an error!
</div>
<input id="test-2">
<div id="test-2-error" class="alert" style="display:none">
  This is an error!
</div>
<br>
<input id="test-1">
<div id="test-1-error"class="alert" style="display:none">
  This is an error!
</div>
<input id="test-2">
<div id="test-2-error" class="alert" style="display:none">
  This is an error!
</div>
<br>

我的 Jquery

 $('[id="test"]').each(function(i, val) {
    $(val).attr("pattern", "(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" );
  });

  $('[id="test"]').focusout(function(i) {
    console.log(i);
    //Validate text in pattern
  });

Answer 1

检查此片段

 var regex = /^[0-9]*$/;
  $(".test").keyup(function(i) {
    console.log(i);
    var $this = $(this);
     if(!regex.test($this.val())){
    	$this.next().show();
    }else{
    $this.next().hide();
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="test">
<div id="test-1-error"class="alert" style="display:none">
  This is an error!
</div><br>
<input class="test">
<div id="test-2-error" class="alert" style="display:none">
  This is an error!
</div>
<br>
<input class="test">
<div id="test-1-error"class="alert" style="display:none">
  This is an error!
</div><br>
<input class="test">
<div id="test-2-error" class="alert" style="display:none">
  This is an error!
</div>
<br>