Wie vereinfacht man mehrere IDs zu mehreren Funktionen?

Question

Ich habe den folgenden Code, der die Eingabe von Daten überprüft. Ich möchte, dass Benutzer dd/MM/YYYY eingeben. Ich werde Benutzer warnen, wenn sie dd/MM/YY eingeben. Ich schreibe jede JavaScript-Funktion für jede Eingabe-Tags. Wie vereinfacht man die JavaScript-Funktionen oder kann ich nicht?

<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

Einfach und schmutzig: das Eingangselement vorbei this in onblur Attribute. (Entfernte Attribute, die auf die Frage irrelevant sind)

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);" />

klar und deutlich ein: Verwendung Ereignis-Listener

$(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" />