使用jquery驗證輸入框使用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())){ 
 
    \t $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>