如何將多個ID簡化爲多個功能？

Question

我有以下代碼檢查日期的輸入。我希望用戶輸入dd/MM/YYYY。如果他們輸入dd/MM/YY，我會提醒用戶。我正在爲每個輸入標記編寫每個javascript函數。如何簡化JavaScript功能或我不能？

<input id="dt_join" name="dt_join" value="<%=dt_join%>" type="text" class="form-control" date-picker onblur="checkdt_join();"> 

<input id="dt_confirm" name="dt_confirm" value="<%=dt_confirm%>" type="text" class="form-control" datewotoday onblur="checkdt_confirm();"> 

<input id="dt_resign" name="dt_resign" value="<%=dt_resign%>" type="text" class="form-control" datewotoday onblur="checkdt_resign();"> 

function checkdt_join(){ 
    var input = document.getElementById("dt_join").value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (pattern.test(input)==false){ 
     alert("Date format is incorrect, please key in DD/MM/YYYY"); 
     } 
    } 

function checkdt_confirm(){ 
    var input = document.getElementById("dt_confirm").value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (pattern.test(input)==false){ 
     alert("Date format is incorrect, please key in DD/MM/YYYY"); 
     } 
    } 
function checkdt_resign(){ 
    var input = document.getElementById("dt_resign").value; 
    var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 

    if (pattern.test(input)==false){ 
     alert("Date format is incorrect, please key in DD/MM/YYYY"); 
     } 
    } 

Answer 1

簡單和髒之一：路過this所述輸入元件中onblur屬性。 （刪除屬性是無關的問題）

function checkdt(el) { 
 
    var input = el.value; 
 
    var pattern = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/; 
 

 
    if (pattern.test(input) == false) { 
 
    alert("Date format is incorrect, please key in DD/MM/YYYY"); 
 
    } 
 
}

<input value="01/01/2001" type="text" onblur="checkdt(this);" /> 
 
<input value="11/11/2011" type="text" onblur="checkdt(this);" /> 
 
<input value="12/12/2012" type="text" onblur="checkdt(this);" />

清晰，明確的一個：使用事件偵聽器

$(function() { 
 
    $(".date-checker").blur(function checkdt() { 
 
    var input = this.value; 
 
    var pattern = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/; 
 

 
    if (pattern.test(input) == false) { 
 
     alert("Date format is incorrect, please key in DD/MM/YYYY"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input value="01/01/2001" class="date-checker" type="text" /> 
 
<input value="11/11/2011" class="date-checker" type="text" /> 
 
<input value="12/12/2012" class="date-checker" type="text" />